CSS3 hover text animate in div

Images and text overlays in HTML/CSS

Here is a very simple tutorial to design image overlays in HTML and CSS only.

Indeed, who has never wanted to quickly position a text over an image? Then change it on mouse hover or even display an alternate image?

The code provided in this article may apply to any website. Simply integrate the HTML code on a page and the CSS code into your stylesheet.

You can find different ways to do it on the internet, but I wanted to synthesize everything I found to extract a minimal and above all clean solution.

What is an image text overlay?

For me, an overlay is just a layer put on top of another. In HTML, it means that it is out of the flow, because it has to be positionned over another element, which is not possible with the default behaviour.

Note: I’m not talking here about text over a background image, which is standard in HTML, but text over an image element (the infamous img tag).

Simple text overlay with no hover

Overlay with background and text change on hover

Overlay with text and image change on hover

HTML code: original content and overlay

Content structure

The overlay-image class container encapsulates all the necessary structure:

• original image,
• original overlay text block,
• image/text overlay block displayed on mouse hover.

On a page written without a page builder (HTML page or simple WordPress theme), for instance like this article, it is essential to define it in order to properly include original content and overlay within the page.

With a builder, it can be replaced by an existing container block (for example it could be the Divi “code” module, to which we simply add the overlay-image class).

The code below also includes encapsulating link tags to make images clickable, but you can remove them if not needed.

The HTML code

CSS code: text overlay and text/image change on hover

The code below is to be included in your styles definition:

• style.css file included in your HTML file if you work directly in HTML,
• style.css file of your child theme if you work with WordPress,
• or your Divi page options if the mechanism is only used at a specific location.

How to display the original or simple text overlay?

The overlay-image class allows you to set the global container when not using a page builder. In this article, I replaced the “width: 100%;” by “width: 80% margin: auto;” to add margins.

Important note: The image-overlay container MUST be “positioned” itself (here relative) in order to position its own elements.

Original image and text overlay are defined by .overlay-image .image and .overlay-image .text specifiers:

• the image fills all available space,
• the text is centered on the image using an absolute “positioning” on the container block and a X-Y translation (a CSS classic).

How to display the new overlay on hover?

The hover overlay is materialized by .overlay-image .hover, and “positioned” in absolute to occupy the entire surface of the container including original image and text (100% width and height).

When the mouse hovers, its opacity changes from 0 to 1 with a smooth transition to make it appear over the original div.

To overlay a text block only (without image), you must first hide the original text because the new image is not there to do so.

The CSS code

I tried to factorize the code to make it simple, readable, compact and easily usable. To do so, I divided it into three parts that you can pick according to your needs.

The first part is common to all three kinds of previous overlays and this is the only one needed for a simple text overlay:

/********* Simple or original overlay *******/ /* Main container */ .overlay-image < position: relative; width: 100%; >/* Original image */ .overlay-image .image < display: block; width: 100%; height: auto; >/* Original text overlay */ .overlay-image .text

This part is needed by both overlays on hover:

/********* Overlay on hover *******/ /* New overlay on hover */ .overlay-image .hover < position: absolute; top: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; >/* New overlay appearance on hover */ .overlay-image:hover .hover

This last part in only needed for background + text overlay on hover:

/********* Background and text only overlay on hover *******/ .overlay-image .normal < transition: .5s ease; >.overlay-image:hover .normal < opacity: 0; >.overlay-image .hover

Conclusion

As you can see, overlays are not technically very difficult… It’s a shame that the mechanism is not part of all WordPress themes on the marketplace!

46 commentaires sur cet article

Thank you SO MUCH for providing this tutorial. I have been searching for hours and all of the other tutorials I found made it way too complicated. Yours is straightforward and very helpful.

You’re welcome, glad it could help!

Hello, Can anybody help me to change font-color to black on mouseover? Thank you!

Hi Lidiya, You can try this: .overlay-image .hover .text

Thank you very much for this really simple and super useful code! I used it, with a lot of ccs modifications, in many of my Joomla sites

Awesome! I’m glad it was so usefull 🙂

Thank you so much for this tutorial. How to put background color on image and on hover to image background color should be removed Thanks!!

Hi, You can add a background color with transparency on the “normal” overlay-image, with opacity 1, and set opacity to 0 on the “hover” overlay-image.

Hi! Thank you so much for this tutorial. 🙂 I was just wondering – would this be possible to accomplish using only HTML? Thanks!

Hi Andy, Do you mean without CSS? If so, the answer is no. But you can inline the CSS in HTML tags if you don’t want external CSS (using style=”…” instead of classes). Hope it can help!

How can I use that with Owl Carousele plugin? I need 4 divs, with inside foto+text in each slide.

Hi Den, Honestly I don’t use Owl Caroussel so I can’t tell you precisely. But if you can insert HTML in slides, you can try and use this code with the CSS in your style.css.

Excellent tutorial. Thanks for share your knowledge!

Thank you for your message 🙂

Thanks for this useful content. It’s always a pleasure to read your great posts filled with tips really!

You’re welcome, and thx for your message!

Thank you SO MUCH! I have been looking for several days for something that lays out the whole idea so simply and clearly! This is such a helpful tutorial.

You’re welcome, glad I could help.

Diego Alvarez February 6, 2019

Источник

Change image to text on hover

How do I make an image change to text when hovered, and back again when the mouse leaves using HTML, CSS and JavaScript? I am currently using HTML5UP’s Aerial theme if that makes any difference.

you can by placing your image as background in css and put another one in the css for your hover but i cant tell you anything more as you did not put your code here

What image you want to change? the background? I also use that template for other projects, but if you don’t give us your code and what you tried to do, it’s very difficult to guess how to help you.

3 Answers 3

You should be able to do this with just css:

#logo-holder #logo-holder .image, #logo-holder .text #logo-holder .text #logo-holder:hover .image #logo-holder:hover .text

 
  
Show this text on hover
 

I’ve just created a quick and dirty solution, and I have no idea if it is actually what you are looking for, you were extremely vague.

Essentially, the text is always there but hidden using opacity: 0 and visibility: hidden . This allows us to do a nice transition to get the text to appear.

Biggest plus point, no JS used at all.

Use the below code it really helpful

      .c--anim-btn span < color: black; text-decoration: none; text-align: center; display: block; >.c--anim-btn, .c-anim-btn < transition: 0.3s; >.c--anim-btn < height: 64px; font: normal normal 700 1.2em/4em Arial,sans-serif; overflow: hidden; width: 200px; >.c-anim-btn < margin-top: 0em; >.c--anim-btn:hover .c-anim-btn   
 Hover Here   
 
www.sanwebcorner.com
  

Источник

How to display image under text like as a background?

I want to display Image under Text. I have done this with Photoshop but it’s a Image. So every time text change I have to do changes in Photoshop. I want to achieve same using jQuery or CSS3 or any other web technique. I want similar to this but NOT by creating new images each time my text changes

Mr.mplungjan this question is not duplicate of you mentioning..Check twice, and first see the Image I’ve posted. can I achieve this using your question?

The second answer in the posted link should be interesting, using transparent text with the alpha channel set with rgba

4 Answers 4

Canvas

This is not using CSS as requested but the canvas element.

The following example will clip the image by the text as well as add a shadow to it.

Example

The result from doing this will be:

/// set some text settings ctx.textBaseline = 'top'; /// defaults to baseline, using top makes life simpler ctx.font = '150px impact'; /// set the font and size we want to use ctx.textAlign = 'center'; /// center for example /// next draw the text ctx.fillText(txt, demo.width * 0.5, 10); 

Next step is to change the composite mode so we use the already drawn text as clipping for the next thing we draw:

/// change composite mode to fill text ctx.globalCompositeOperation = 'source-in'; /// draw the image you want on top; will be clipped by text ctx.drawImage(img, 0, 0); 

Now the image we drew got clipped. To add a shadow we need to go an extra round as if we added shadow from the beginning the images would have been drawn into the shadow area as well.

So what we need to do is to reset composite mode to default, set shadow and then draw the canvas back to itself. As it’s drawn on top in the exact same position we won’t notice.

We are using save and restore here to avoid resetting the shadow manually.

/// reset composite mode to normal ctx.globalCompositeOperation = 'source-over'; /// create a shadow by setting shadow. ctx.save(); ctx.shadowColor = 'rgba(0,0,0,0.5)'; ctx.shadowBlur = 7; ctx.shadowOffsetX = 3; ctx.shadowOffsetY = 3; /// . and drawing it self back ctx.drawImage(demo, 0, 0); ctx.restore(); 

In the demo I made a loop that changes the text so you can see that it’s simply a matter of supplying a different text.

Also notice that the background is transparent so you can place the canvas on top of other elements (in the demo I changed the background color of the body).

I would suggest that the demo code is refactored to a universal function instead. For that you can put all settings inside it and move save to the beginning and restore to the end in order to preserve other settings set outside the function.

Источник