HOVER TEXT ON IMAGE HTML HOW TO

There are some additional options we have, for example adding easing to the animation. We just specify which property we want to animate, opacity in this case, and then how long the animation should take. Unfortunately, just now, we still have to include several lines that include the browser prefixes for the transition property, but in time that will shrink to just one line. We just have to use the new CSS3 transition property. Well, youвЂ™ll be glad to know thatвЂ™s itвЂ™s very simple to add that in. ItвЂ™s looking good so far, but weвЂ™re missing the animation. Then when the mouse is hovered over the list item, IвЂ™ll change the opacity of the to 1, making it fully opaque. That will make it completely transparent. The change I made there was to set the opacity of the outer to 0. We just have to make a couple of quick additions to the CSS file. Now I only want to show that text when the mouse is over the image. It will work pretty nicely cross-browser, but be aware that it will not work in IE8 or any earlier version of IE. This is a pretty straightforward solution that works without a lot of weird workarounds. If youвЂ™ve worked with CSS for any length of time, then you know that vertically-aligning anything to be in the middle of a container is pretty darn tough.

That lets me use the vertical-align attribute to place my text right in the middle of the image. Next up, IвЂ™ve set that inner to display: table-cell. In this case IвЂ™m setting the background color to 50% transparent black. That will allow me to make my background color partially transparent by specifying an alpha value in addition to values for red, green, and blue. First up, that rgba color IвЂ™m using for the background of the outer span. ThereвЂ™s a few handy techniques here IвЂ™d like to draw attention to. Now weвЂ™ll take that text description for each image and place it on top of the image. IвЂ™m setting the width and height of each list item to the width and height of my individual images, and then lining up the list items by setting them to display: inline-block. First up, we want to get rid of the bullets and line our images up across the page.

Now that weвЂ™ve got the markup out of the way, letвЂ™s jump into the CSS. IвЂ™d just repeat that list item and everything inside of it for each image that I wanted to include. Each list item will contain an image andВ a couple of nested вЂs to hold the text that should appear when my site visitors hover over the images. To keep things neat and tidy, IвЂ™m going to put my images in a list. When you move your mouse away, the text fades away. If you move your mouse over those images, youвЂ™ll see some text fade in that tells you where each photo was taken. HereвЂ™s a sample of what weвЂ™ll be creating:

HOVER TEXT ON IMAGE HTML HOW TO

I updated this tutorial to show you how to take advantage of even more CSS3 properties. In this tutorial, IвЂ™ll walk you through fading in text over an image on hover. Thanks to CSS3 and better and better browser support for it, we can accomplish things now with CSS that previously required fancy JavaScript work.

Hover text on image html