0

I have an image on a page and a div with info text Code Pen Example.

<div>
  <img src="http://placehold.it/400x200"/>
  <div class="info">
    <a href="#">GO</a>
    <span>Title</span>    
    <p>Some information text</p>
  </div>
</div>

I would like the div Info to be invisible and when I move the mouse over the image the div would show over the image, with a transparency, and exactly the same width and height of the image.

And I would like the anchor inside the div Info to be on the right up corner. How can I do this?

j08691
  • 204,283
  • 31
  • 260
  • 272
Miguel Moura
  • 36,732
  • 85
  • 259
  • 481
  • 2
    You forgot to post the CSS/jQuery you tried that didn't work. – j08691 May 16 '14 at 20:19
  • 1
    Don't need jQuery... http://jsfiddle.net/teddyrised/TWBhU/ – sbeliv01 May 16 '14 at 20:21
  • I didn't try JQuery because I am not sure if this can be made with CSS or if I need JQuery ... And to be honest I am not sure how to do this with JQuery. – Miguel Moura May 16 '14 at 20:22
  • I would definitely go with CSS for this. Pointless loading a big library for something as as small as this. – Lodder May 16 '14 at 20:26
  • 1
    You don not need to load a big library, and I pretty much assume everyone who is developing on the web, is using jQeury specially when they tag the question with jQuery.... – Casey ScriptFu Pharr May 16 '14 at 20:27

5 Answers5

8

No jQuery needed.

You need to relatively position the parent element, .overlay. You could also change the display to inline-block if you want it to take the dimensions of the img element. Absolutely position the .info element to take the same size as the parent. Use a rgba() color for transparency. Use the selectors .overlay img:hover + .info, .info:hover to change the display of the .info element to block when hovering over the img and the .info element.

Example Here

.overlay {
    display:inline-block;
    position:relative;
}
.info {
    display:none;
    background-color: rgba(240,240,240,0.5);
    padding: 8px;
    text-align: center;
    position:absolute;
    top:0; right:0;
    bottom:0; left:0;
}
.overlay img:hover + .info, .info:hover {
    display:block;
}

If you want the overlay to fade/transition, simply manipulate the element's opacity rather than changing the display. (example).

For a better, more detailed answer - see my other answer here.

Community
  • 1
  • 1
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
1

You can also use jQuery, however it will not be the preferred choice:

$(document).ready(function(){
     $(".info").hover(function(){
         $(this).show();
     });
});

Or as @Josh has suggested, the simple CSS which will be faster and saves having to load a big library:

.overlay img:hover, .info:hover {
    display:block;
}
// Credits for this go to Josh Crozier

Do note though that rgba will not work in IE8 and below. Not sure if you're going to be supporting it but thought I would let you know never the less

Lodder
  • 19,758
  • 10
  • 59
  • 100
0

First you need to hide your div.info with CSS:

div.info { display:none }

Then with jQuery you need to create a function that detects when the mouse is hover the img:

function() {

    $("img").hover(function() {

          $(".info").css("display","block");
          $(".info").width($(img).width());
          //More things
    });
}
Lodder
  • 19,758
  • 10
  • 59
  • 100
abaracedo
  • 1,404
  • 5
  • 26
  • 45
0

It could look like this:

<script type="text/javascript">
    $(document).ready(function(){
        $("#yourdiv").mouseover(function(){
            //
        });
        $("#yourdiv").mouseout(function(){
            //
        });
    });
</script>
<style type="text/css">
.yourdiv{
    background-image: url(yourimg.jpg);
    height: 420px;
    width: 420px;
}
</style>
<div id="yourdiv"></div>
Dwynr
  • 11
  • 4
0

Your details were a little vague on this request for help, also you didn't provide any attempts at your jquery, so basically I'm giving you the simplest form of what you're asking for.

Here is the codepen

Note

CSS Reset in codepen was used, and the jquery library must be called in order for that to work in whatever you do.

Also, since this question was rather lazy I didn't provide you any IE fallbacks because I felt like being lazy :).

HTML

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> 
    <div id="overlay" class="info">
      <a id="show-me" href="#">GO</a>
      <span>Title</span>    
      <p>Some information text</p>
        <div id="hidden-div">
          <div class="content">
            <p>Some Content Here</p>
            <a id="close" href="#">&#x2716; Close Overlay!</a>
          </div>
      </div>
  </div>

CSS

*, 
*:before, 
*:after { 
box-sizing: border-box; 
}

body, 
html { 
margin: 1em; 
font-family: 'Open Sans', sans-serif;
}

a:link { 
text-decoration: none; 
color: #DB1F1F; 
}

.info {
  background-image: url('http://placehold.it/400x200'); 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-color: #E0E0E0;
  padding: 8px;
  height: 200px; 
  width: 400px; 
  position: relative; 
  z-index: 1; 
}

#hidden-div { 
 display: none; 

 position: absolute;
 height: 200px; 
 width: 400px; 
 top: 0; 
 left: 0; 
 background: rgba(205,36,36,.5);
 display: none;
 z-index: 0
}

.content { 
position: relative; 
top: 50px; 
}

.content p { 
margin: .5em 0; 
color: #fafafa;
}

.content a:link, 
.content a:visited { 
color: #950000; 
font-weight: 700;
}

JQUERY

$(document).ready(function(){ 
  $("#show-me").click(function(){ 
  $("#hidden-div").toggle("slow"); 
  });
  $("#close").click(function(){ 
  $("#hidden-div").toggle("fast");
  });
});
Devin Luby
  • 176
  • 10