Do I need to create extra CSS classes for that? - html

Question

I have a CSS question with this image hover effect - "Fiddle". I can't use width 100% in .img-overlay to get the overlay to cover the whole areas of the two pictures, so I have to use width:138px for the first one and width:300px for the second. In doing so, I end up making 4 more classes (.img-overlay2 .img-overlay2.2 .img-overlay2 h4 .img-overlay2 p, .img-wrap:hover .img-overlay2) Is there a more concise way to achieve that? Can I avoid some of the duplication?
CSS
.img-wrap{
overflow:hidden;
position:relative;
}
.img-overlay{
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
width:138px;
height:100%;
z-index:1000;
}
.img-overlay h4, .img-overlay p{
padding:0 10px;
}
.img-wrap:hover .img-overlay{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
.img-overlay2{
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
width:300px;
height:100%;
z-index:1000;
}
.img-overlay2.2{
width:100%;
}
.img-overlay2 h4, .img-overlay2 p{
padding:0 10px;
}
.img-wrap:hover .img-overlay2{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}

Answer 1

You can try to use something like this http://jsfiddle.net/EyAdp/
HTML:
<div class="a image"><div class="overlay"></div></div>
<div class="b image"><div class="overlay"></div></div>
CSS:
.a {
width:150px;
height:60px;
background-image:url("http://placekitten.com/150/60");
}
.b {
width:100px;
height:50px;
background-image:url("http://placekitten.com/100/50");
}
.image {
position:relative;
}
.overlay {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
.overlay:hover {
background-color:rgba(1,1,1,0.3);
}

Answer 2

yes... you can avoid the duplications easily. see the following approach:
.img-wrap{
overflow:hidden;
position:relative;
}
.img-overlay{
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity = 0);
position:absolute;
height:100%;
z-index:1000;
}
.img-overlay h4, .img-overlay p{
padding:0 10px;
}
.img-wrap:hover .img-overlay{
opacity:0.75;
filter: alpha(opacity = 75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
.img-overlay138{
width:138px;
}
.img-overlay300{
width:300px;
}
and you html:
<div class="img-wrap">
<a href='#'><img src='http://wizzywizzyweb.gmgcdn.com/media/products/payday-2-4-pack/boxart/small-payday-2-4-pack_boxart_tall-136x159.jpg' alt="bbh"/></a><div
class="img-overlay img-overlay138">
<p>dfdfdf</div></div>
<div class="img-wrap">
<a href='#'><img src='http://wizzywizzyweb.gmgcdn.com/media/smallofferboxes/2013/09/13/Voucher-Low-offer-box04_.jpg' alt="ddfdf"/></a><div
class="img-overlay img-overlay300">
<p>dfdfdf
</div></div>

Answer 3

If you need to keep the class names - without changing your markup or CSS much, you can reduce the duplication by defining common attributes once, then overriding specific attributes later in your stylesheet:
Demo Fiddle
.img-overlay,
.img-overlay2 {
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity=0);
position:absolute;
width:138px;
height:100%;
z-index:1000;
}
.img-overlay2 {
width:300px;
}
.img-overlay h4, .img-overlay p,
.img-overlay2 h4, .img-overlay2 p {
padding:0 10px;
}
.img-wrap:hover .img-overlay,
.img-wrap:hover .img-overlay2 {
opacity:0.75;
filter: alpha(opacity=75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
By adding two additional class definitions and adding them to your overlay elements while removing references to img-overlay2:
Demo Fiddle
HTML:
<div class="img-overlay small">...
<div class="img-overlay large">...
CSS:
.img-wrap {
overflow:hidden;
position:relative;
}
.img-overlay {
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity=0);
position:absolute;
width:138px;
height:100%;
z-index:1000;
}
.img-overlay.small {
width: 138px;
height: 159px;
}
.img-overlay.large {
width: 300px;
height: 120px;
}
.img-overlay h4, .img-overlay p {
padding:0 10px;
}
.img-wrap:hover .img-overlay {
opacity:0.75;
filter: alpha(opacity=75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
If you can apply dimensions on your img-wrap element, you could change to something like this:
Demo Fiddle
HTML:
<div class="img-wrap small">…</div>
<div class="img-wrap large">…</div>
CSS:
.img-wrap {
overflow:hidden;
position:relative;
}
.img-wrap.small {
width: 138px;
height: 159px;
}
.img-wrap.large {
width: 300px;
height: 120px;
}
.img-overlay {
background-color:#8DBDD8;
bottom:0;
color:#222;
opacity:0;
filter: alpha(opacity=0);
position:absolute;
width:100%;
height:100%;
z-index:1000;
}