圖像懸停上的顏色疊加css

我試圖在圖像頂部疊加一個白色圓圈，但是這比我以爲只使用CSS更復雜。該解決方案不需要嚴格的CSS，只是我不想使用圖像。圖像懸停上的顏色疊加css

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; 
}

來源

2013-10-20 Eric Filkins

假設該結構

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>

那麼這個一般CSS應該工作。使用溢出隱藏，絕對定位和過渡。

.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; 
}

來源

2013-10-20 08:20:04

轉型反正是有，以與寬度和高度的比例這項工作？我正在努力的網站是響應式的。 –

可能，但它的設計與固定的圖像大小（或至少容器大小）。總委託人仍然適用。 –

看看這個例子：

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;}

沒有js需要。

希望有幫助。

來源

2013-10-20 05:36:23 geevee

使用此代碼：

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; 
}

來源

2013-10-20 05:38:28

這似乎僅使圖像過渡的，而不是造成圓在圖像上 –

圖像懸停上的顏色疊加css

回答

相關問題