Menu
I am trying to get a small box to appear on the bottom-left side of an image when a mouse moves over it. Inside the box there will be a link to a different page.
Here is somewhat similar to what I want, but the box to be smaller and not connected to the border of the image.
I've tried everything and can't find an answer. And I don't want to use tooltip, let alone the fact that i have no javascript knowledge whatsoever. I really want this to be CSS.
Also the images I'm trying to work with can be found right here.
249
The :hover selector is used to show the tooltip text when the user moves the mouse over the <div> with class="tooltip" .
Answer: Use the CSS background-image property You can simply use the CSS background-image property in combination with the :hover pseudo-class to replace or change the image on mouseover.
This is using the :hover pseudoelement in CSS3.
HTML:
<div id="wrapper"> <img src="http://placehold.it/300x200" class="hover" /> <p class="text">text</p> </div> CSS:
#wrapper .text { position:relative; bottom:30px; left:0px; visibility:hidden; } #wrapper:hover .text { visibility:visible; } Demo HERE.
This instead is a way of achieving the same result by using jquery:
HTML:
<div id="wrapper"> <img src="http://placehold.it/300x200" class="hover" /> <p class="text">text</p> </div> CSS:
#wrapper p { position:relative; bottom:30px; left:0px; visibility:hidden; } jquery code:
$('.hover').mouseover(function() { $('.text').css("visibility","visible"); }); $('.hover').mouseout(function() { $('.text').css("visibility","hidden"); }); You can put the jquery code where you want, in the body of the HTML page, then you need to include the jquery library in the head like this:
<head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> </head> You can see the demo HERE.
When you want to use it on your website, just change the <img src /> value and you can add multiple images and captions, just copy the format i used: insert image with class="hover" and p with class="text"
176
Here is one way to do this using css
HTML
<div class="imageWrapper"> <img src="http://lorempixel.com/300/300/" alt="" /> <a href="http://google.com" class="cornerLink">Link</a> </div> CSS
.imageWrapper { position: relative; width: 300px; height: 300px; } .imageWrapper img { display: block; } .imageWrapper .cornerLink { opacity: 0; position: absolute; bottom: 0px; left: 0px; right: 0px; padding: 2px 0px; color: #ffffff; background: #000000; text-decoration: none; text-align: center; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; } .imageWrapper:hover .cornerLink { opacity: 0.8; } Demo
Or if you just want it in the bottom left corner:
Demo
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
