17728

Overlay/fade in a div/text when hovering over an image

Question:

I have an <img> that I want to be able to hover over, and when hovering over it I would be able to animate or fade in a div or text to display information of sorts. The information displayed will be overlaid on the image.<br /> I've seen this done on a website before, I can't remember or place where I've seen it, but the idea is very clear in my mind.

I'm sorry I don't have any good attempts at this, I've read around and can't find anything that works for my idea.

I have not understood JS fully, but I can think of a few ideas to try and make it work. I just need a little help to get me in the right direction, before I try and do the rest by myself.

My first idea would be to remove the image directly, then replace it with a div that has that image in background-image with text overlaying it.

<pre class="snippet-code-js lang-js prettyprint-override">document.getElementById("imageBox").onmouseover = function() { imageMouseOver()}; var image = document.getElementById("imageBox"); var textHere = imagine a lot of html here; function imageMouseOver() { document.getElementById("imageBox").parentNode.removeChild(image); document.getElementById("imageBox").add(textHere); };

The above doesn't work, and my other ideas would be based off of the initial one, for example: -instead of removing the image, have the opacity of the image be reduced and something be added over it to simulate that effect -or, have opacity:0 to the actual overlay to hide it, and onmouseover, just make it appear with opacity:1 and maybe transition: opacity 200ms ease?

Sorry I am asking too much here, but I'm pretty much clueless where to start, could someone point me somewhere for me to get started? Ideally a few examples would be good, or a site explaining it would be great!

Answer1:

Here's an example with CSS using :hover to transition the opacity of your text element.

<pre class="snippet-code-css lang-css prettyprint-override">.wrap { display: inline-block; position: relative; padding: 1em; background: #fff; box-shadow: 0 2px 3px rgba(0,0,0,0.5); } .text { background: rgba(0,0,0,0.8); color: #fff; transition: opacity .5s; opacity: 0; position: absolute; top: 1em; bottom: 1em; left: 1em; right: 1em; display: flex; justify-content: center; align-items: center; } .wrap:hover .text { opacity: 1; } img { max-width: 100%; display: block; } <pre class="snippet-code-html lang-html prettyprint-override"><div class="wrap"> <img src="http://kenwheeler.github.io/slick/img/fonz1.png"> <div class="text">text overlay</div> </div>

Recommend

  • Printing image displayed in WPF picture box
  • Replacing ToolTip Text with a GIF
  • add geom_line to link all the geom_point in boxplot conditioned on a factor with ggplot2
  • Click on a thumbnail, an image in a div changes
  • Plotly: Bar and pie charts side by side
  • How to overlay small animation on camera stream in opencv
  • How to light-up a sprite in cocos2d?
  • Dynamically change cell's height while typing text, and reload the containing tableview for res
  • Loading jQuery qTip code dynamically
  • simulate a onclick with selenium python
  • Define height of select box
  • CSS Sprites don't work in IE[8/7/6]
  • Use preg_match to find if string contains script-tags
  • button in popup.html not working
  • Remove previous Directions Route Google Maps
  • $_POST for text in DIV elements
  • Making Google Visualization - Annotation Chart to work in GWT
  • Update Google Maps traffic layer without page reloading
  • How can I speed up CURL tasks?
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Google Custom Search with transparent background
  • Android fill_parent issue
  • R - Combining Columns to String Based on Logical Match
  • Get one-time binding to work for ng-if
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Running a C# exe file
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • Change an a tag attribute in JavaScript based on screen width
  • Do create extension work in single-user mode in postgres?
  • R: gsub and capture
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Comma separated Values
  • Reading document lines to the user (python)
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?