raulbaros raulbaros - 2 months ago 9
CSS Question

Overlay not to include div

I have an

image
inside a well.

When hovering the image/well the the overlay information shows (currently this is correct).

The overlay should cover the whole well (the grey part) in which the image is situated. The
product-title
is below the image/well and is separate from the well.

So when hovering the
product-title
should not be affected (it should actually get a red
background
and the text font
color
should become white).

How to achieve since now the whole thing, including the
product-title
becomes grey upon hovering?

So actually everything is good now, only when hovering the
product-title
div should get its own style and not be "hidden" by the grey overlay.



.product-detailsmas .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 0;
background: #F7F7F7;
color: blue;
text-align: center;
padding: 10px;
border-top: 1px solid #A10000;
/* vertical-align: middle; */
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
}

.product-detailsmas {
background-color: #E6E6E6;
text-align: center;
}

.product-detailsmas:hover .overlay {
opacity: 1;
}

.well.sb .product-titlesidebar {
font-size: 13px;
font-family: 'Montserrat',sans-serif;
color: #444;
font-weight: 700;
line-height: 1.25em;
margin: 5px;
}

<div>
<a href="#" target="_blank">
<div class="product-detailsmas">
<div class="image-video-linksidebar">
<img alt="#" src="http://lorempixel.com/100/100">
<div class="brandmas">
BRAND
</div>
<div class="categorymas">
CATEGORY
</div>
</div>
<div class="overlay">
<div class="intro-descriptioncar">
Intro description car
</div>
<div class="userfield1car">
Userfield-1-car
</div>
<div class="userfield1car">
Userfield-2-car
</div>
<div class="userfield1car">
Userfield-3-car
</div>
</div>
</div>
<div class="product-titlesidebar">
CAR TITLE BRAND CATEGORY MODEL-THIS SHOULD NOT BE AFFECTED BY THE OVERLAY HOVER
</div><!--</div>--></a>
</div>




Answer

ADD: position: relative; to .product-detailsmas CSS.

This restricts the absolute positioned element to the parent.

REMOVE: the padding on .product-detailsmas .overlay -- This is causing the overlay to be larger than the parent.

.product-detailsmas .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 0;
    background: #F7F7F7;
    color: blue;
    text-align: center;
    border-top: 1px solid #A10000;
    /* vertical-align: middle; */
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

.product-detailsmas {
    background-color: #E6E6E6;
    text-align: center;
  position: relative;
}

.product-detailsmas:hover .overlay {
    opacity: 1;
}

.well.sb .product-titlesidebar {
    font-size: 13px;
    font-family: 'Montserrat',sans-serif;
    color: #444;
    font-weight: 700;
    line-height: 1.25em;
    margin: 5px;
}
<div>
        <a href="#" target="_blank">
        <div class="product-detailsmas">
            <div class="image-video-linksidebar">
                <img alt="#" src="http://lorempixel.com/100/100">
                <div class="brandmas">
                    BRAND
                </div>
                <div class="categorymas">
                    CATEGORY
                </div>
            </div>
            <div class="overlay">
                <div class="intro-descriptioncar">
                    Intro description car
                </div>
                <div class="userfield1car">
                    Userfield-1-car
                </div>
                <div class="userfield1car">
                    Userfield-2-car
                </div>
                <div class="userfield1car">
                    Userfield-3-car
                </div>
            </div>
        </div>
        <div class="product-titlesidebar">
            CAR TITLE BRAND CATEGORY MODEL-THIS SHOULD NOT BE AFFECTED BY THE OVERLAY HOVER
        </div><!--</div>--></a>
    </div>

I know it's technically okay, but I personally would not load a bunch of separate divs inside an anchor tag.

Comments