CODEWITHSUNDEEP
css
Sam Ham
Sam Ham

Reputation: 111

Add overlay to an image

I wanted to add an overlay to an image if they hovered over the image.

I have tried plenty of ways but the image just seems to disappear or stay the same.

This is what it will be like

<a id="icon"
  style="background: url(/images/layout/top/icon.gif); height:23px; width:23px; float:left; margin-right:3px;"
  href="page.php?pageid=123" title="Icon">
</a>

Really and truly, what I am after is a quick way to have the image change without having to make more images.

So when not hovering over the image - Original image When hovering over the image - 40% color overlay?

Thanks in advanced.

What I tried:

a.thumbnail {
background-color:orange;
filter: Alpha(Opacity=40, Style=0); 
-moz-opacity: 40%; 
opacity: 0.4; 
}

Upvotes: 1

Views: 4321

Answers (4)

Wesley Terry
Wesley Terry

Reputation: 195

I created a little fiddle that has this doesn't overlay, but gives the same effect using just CSS. Plus, I threw in some CSS transitions for fun. Basically creating a div behind the image that is revealed via pseudo element hover. This way you can drop in your tags still without needing to create CSS background images like crazy. Just swap out the alpha stuff to make the overlay work the other way.

http://jsfiddle.net/wesleyterry/jwXvA/#base

Hope that is what you were looking for.

Upvotes: 2

Tallboy
Tallboy

Reputation: 13417

Basically, if it's an overlay you can assume the height and width is probably going to be the same.

in this demo i accidentally used images sized 25. change to 23

http://jsfiddle.net/raU2J/7/

<div class="overlay_wrapper">
   <a href="#"></a>
   <div class="overlay"></div>
   <img src="cake.jpg" />
</div>​


.overlay,
.overlay_wrapper a,
.overlay_wrapper {
  width: 25px;
  height: 25px;
  position: relative;
}

.overlay_wrapper a {
  position: absolute;
  z-index: 10;
  display: block;
}

.overlay {
  display: none;
  background: red;
  position: absolute;
  top: 0;
  left: 0;
  filter: Alpha(Opacity=40, Style=0); 
  -moz-opacity: 40%; 
  opacity: 0.4; 
  z-index: 9;
}​

jquery:

$(".overlay_wrapper").hover(
  function () {
    $(this).find('.overlay').fadeIn();
  }, 
  function () {
    $(this).find('.overlay').fadeOut();
  }
);

Upvotes: 1

Snger
Snger

Reputation: 1384

The sample demo:

html

<div class="img"><div class="overlap"></div></div>

css

.img {width:100px;height:100px;background:red;position:relative;}
.overlap { visibility:hidden;}
.hover .overlap {position:absolute;top:0;left:0;width:100px;height:100px;background:#333;filter:alpha(opacity=40); /* for IE */  -moz-opacity:0.4; opacity: 0.4;-khtml-opacity: 0.4; visibility:visible;}

Upvotes: 0

Mr Lister
Mr Lister

Reputation: 46559

This is not possible with just the single <a>, but you can put the <a> in a container (a span or a div). Give the container the desired background, and give a:hover a background color like rgba(255, 255, 255,.4).

If that doesn't work like you want, explain more about your requirements.

Upvotes: 0

Related Questions