CODEWITHSUNDEEP
cssimagebackground-image
Eric Filkins
Eric Filkins

Reputation: 329

Color overlay on image hover css

I'm trying to overlay a white circle on top of an image once it is hovered over, however this is trickier than I thought using just CSS. The solution doesn't need to be a strictly CSS one, it's just that I wouldn't like to use images.

HTML/ERB

<div class="item-container">
  <div class="rollover-item">
    <%= link_to image_tag(@featured_product_first.product.images.order(:placement).first.image.url(:medium)), @featured_product_first.product %>
  </div>                
  <%= link_to @featured_product_first.product.name, @featured_product_first.product %>
  <% end %>
</div>

CSS

.item-container {
  width: 100%;
  height: 100%;
}

.rollover-item {
  position: relative;
  z-index: 1;
}

.rollover-info img:hover:after {
  content: ' ';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(255,255,255,.5);
  border-radius: 50%;
  z-index: 10;
}

Upvotes: 0

Views: 10091

Answers (3)

Paulie_D
Paulie_D

Reputation: 115096

Assuming this structure

JSFiddle Demo

HTML

<div class="item-container">
  <div class="rollover-item">
      <img class="product-img" src="http://lorempixel.com/output/technics-q-c-200-200-7.jpg" alt=""/>
      <a class="description" href="#">Product Description</a>
    </div>    
</div>

Then this general CSS should work. Using overflow hidden, absolute positioning and transitioning.

    .item.container {
    display:inline-block;


}

.rollover-item {
    position:relative;
    overflow:hidden;
    width:200px;
}

.description{
    position:absolute;
    top:100%;
    left:0;
    display:block;
    width:200px; /* as image */
    height:200px; /* as image */
    line-height:200px; /* as image */
    text-align:center;
    text-decoration:none;
    color:black;
    font-weight:bold;
    background:rgba(255,255,255,0.5);
    border-radius:50%;
    transition:top 0.5s ease;
}

.rollover-item:hover .description {
    top:0;
}

Upvotes: 2

Mohsen Safari
Mohsen Safari

Reputation: 6795

use this code:

jsFiddle is here

HTML:

<div class="item-container">
  <div class="rollover-item">
  </div>    
</div>

CSS:

.item-container{
    position:relative;
    width:200px;
    height:200px;
    background:tomato; /* I love this color */
}
.rollover-item{
    position:aboslute;
    width:0%;
    height:0%;
    margin:0 auto;
    background:#fff;
    border-radius:50%;
    opacity:0;
    transition:all 0.5s ease;
}
.item-container:hover .rollover-item{
    width:100%;
    height:100%;
    opacity:1;
}

Upvotes: 0

geevee
geevee

Reputation: 5451

look at this example:

html:

<div class="item_cont">
    <img src="img_src.jpg" />
    <div class="circ"></div>
</div>

css:

.item_cont{width:100px;height:100px;}
.item_cont img{width:100px;height:100px;}
.item_cont .circ{display:none;background:#fff;width:80px;height:80px;border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:50%;}
.item_cont:hover .circ{display:block;}

no js needed.

hope that helps.

Upvotes: 0

Related Questions