# How do I place 2D text over 3D card element?

**URL:** <https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080>\
**Category:** Questions\
**Tags:** transform\
**Created:** [November 13, 2023, 8:45am UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080 "2023-11-13T08:45:20Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [November 15, 2023, 7:19pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/21 "2023-11-15T19:19:52Z")

</div>

oh that’s pretty cool, I love the infinite dragging 👍 [here](https://jsfiddle.net/z6q01xto/) - I copied that to jsfiddle because I hate codepen

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 15, 2023, 7:21pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/22 "2023-11-15T19:21:01Z")

</div>

ok but can you try to add the 3d card over text here , and text should be show by card hover. i think you can do because you already shown a video

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [November 15, 2023, 7:26pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/23 "2023-11-15T19:26:14Z")

</div>

reading the code, it is actually not too hard - you have to change `init(el, i)` method. basically, it gets called with the image elements (\<figure\>-s, to be precise) and you want it to be called with \<div\>-s instead. this way, you can put the text into those \<div\>-s and then use [html2canvas](https://html2canvas.hertzen.com/) instead of

```js
this.texture = loader.load(this.el.dataset.src, (texture) => {

```

this.

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 15, 2023, 7:27pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/24 "2023-11-15T19:27:14Z")

</div>

> [@makc3d](#):
>
> jsfiddle

kindly can you pleas write code here ‘jsfiddle’ [https://jsfiddle.net/z6q01xto/](https://jsfiddle.net/z6q01xto/)

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [November 15, 2023, 7:56pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/25 "2023-11-15T19:56:36Z")

</div>

> [@Zakir\_Hosen](#):
>
> can you pleas write code here

what do you know, I actually did that but before I could save my browser crashed 😔 I am pissed and I am not doing this again.

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 15, 2023, 7:58pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/26 "2023-11-15T19:58:34Z")

</div>

can you write your local and can give me this code file by github or drive?

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 15, 2023, 8:14pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/27 "2023-11-15T20:14:23Z")

</div>

Hi! can you pleas try one more time, do code o jsfiddle that should be understandable. also i have done the dragging and animation part i need as same as your view card hover over text [https://codepen.io/ReGGae/pen/eYGyLrP](https://codepen.io/ReGGae/pen/eYGyLrP)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 15, 2023, 9:05pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/28 "2023-11-15T21:05:22Z")

</div>

Sorry, but I won’t do your job for you.  
If you want something to be done, do it yourself.  
You’ve been provided with many ideas and advice.

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 16, 2023, 4:04am UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/29 "2023-11-16T04:04:17Z")

</div>

ok just share you thought, how you make using css2d, as you share your video.thats should be helped me

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [November 16, 2023, 7:05am UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/30 "2023-11-16T07:05:15Z")

</div>

> [@Zakir\_Hosen](#):
>
> how you make using css2d

Looking into the source code of the provided example 🤔

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 16, 2023, 4:36pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/31 "2023-11-16T16:36:33Z")

</div>

Hi! you read the source, pleas give me some hints abouty our video css2d hover over text pleas!

---

<div class="post-metadata">

**Author:** ![naonao\_naonvl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/naonao_naonvl/32/20011_2.png) [@naonao\_naonvl](https://discourse.threejs.org/u/naonao_naonvl)\
**Post date:** [November 18, 2023, 2:46pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/32 "2023-11-18T14:46:04Z")

</div>

This can be a good start [https://codepen.io/chungeric/full/oNEoKjg](https://codepen.io/chungeric/full/oNEoKjg)

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 18, 2023, 3:17pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/33 "2023-11-18T15:17:22Z")

</div>

Hi! @naonao_naonvl thanks for youe preview, but i want here hover with text also.i mean when user hover the card each card show diffarent text . can you pleas do this also pleas!!

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [November 18, 2023, 6:29pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/34 "2023-11-18T18:29:36Z")

</div>

Here are cards that can each show different text when hovering: [https://codepen.io/haroldiedema/pen/XWOZJZd](https://codepen.io/haroldiedema/pen/XWOZJZd)

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 18, 2023, 6:32pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/35 "2023-11-18T18:32:12Z")

</div>

thanks but, i thin you are not understood my point. Sorry! i mean here mouse drag with hover over each card text,[https://codepen.io/chungeric/full/oNEoKjg](https://codepen.io/chungeric/full/oNEoKjg) see here i want like this drag with each card hover over text

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [November 18, 2023, 6:50pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/36 "2023-11-18T18:50:05Z")

</div>

Sure, I’ve updated the codepen.

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 18, 2023, 6:52pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/37 "2023-11-18T18:52:24Z")

</div>

Thanks but, if you see clearly its need infinity dragging any direction with smoothly, you can use html element to 3d ,use three.js.and you can use this code and maked here each card hover over text [https://jsfiddle.net/z6q01xto/](https://jsfiddle.net/z6q01xto/)

---

<div class="post-metadata">

**Author:** ![Harold](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/harold/32/32136_2.png) [@Harold](https://discourse.threejs.org/u/Harold)\
**Post date:** [November 18, 2023, 6:53pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/38 "2023-11-18T18:53:50Z")

</div>

Oh I’m sorry, but that is impossible in my current implementation and budget.

In all seriousness though, I think you should update (or create a new post) as a “job” rather than a “question” and offer payment. Seeing how quick you are to respond to messages (not taking any time reading/learning the source code that is provided to you), it’s clear you’re looking for something to do the job for you, instead of giving you advice on how to achieve it by yourself.

---

<div class="post-metadata">

**Author:** ![Zakir\_Hosen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/zakir_hosen/32/41501_2.png) [@Zakir\_Hosen](https://discourse.threejs.org/u/Zakir_Hosen)\
**Post date:** [November 18, 2023, 6:55pm UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/39 "2023-11-18T18:55:23Z")

</div>

ok thanks! i already maked this and achiived this using html element to 3d ,trying to improved my code, also thanks for helped me by giving some idea, last question is how much budget for its possible?

---

<div class="post-metadata">

**Author:** ![naonao\_naonvl](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/naonao_naonvl/32/20011_2.png) [@naonao\_naonvl](https://discourse.threejs.org/u/naonao_naonvl)\
**Post date:** [November 19, 2023, 1:04am UTC](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080/40 "2023-11-19T01:04:01Z")

</div>

i think u can try inspecting this file

![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/8/98e54ecd01a78dedad3d967ab4b56cfb3b16a4c0.png)

that file contains the threejs code for the website

[Previous page](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080.md?page=1)

[Next page](https://discourse.threejs.org/t/how-do-i-place-2d-text-over-3d-card-element/58080.md?page=3)