CODEWITHSUNDEEP
htmlcss
Zariweya
Zariweya

Reputation: 295

Two divs into a div to apply hover effect

I have the following code:

HTML

<div class="row">
    <label id="my-button">
        <div class="par">
            <div class="col"><div class="circular"></div></div>         
            <div class="col"><h2>Text1</h2></div>
        </div>
    </label>
    <label id="my-button2">
        <div class="par">
            <div class="col"><div class="circular"></div></div>         
            <div class="last"><h2>Text2</h2></div>
        </div>
    </label>
</div>
... (more rows)

CSS

.circular {
    width: 105px;
    height: 105px;
    border-radius: 150px;
    -webkit-border-radius: 150px;
    -moz-border-radius: 150px;
    background: url(imgs/desktop.jpg) no-repeat;
    background-size: contain;
    box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    -moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
    margin: 20px 20px;
}

h2{
    font-family: 'Georgia', serif;
    font-size: 2em;
    color: #2B1C1C;
    transform: translate(-15%,170%);
}

.col{
    float: left;
    width: 25%;
}

.last{
    float: right;
    width: 25%;
}
.row{
    height: auto;
    overflow: auto;
}

So, the idea is, using this "table" in CSS, show some images in div's with some text next to them. One image, one text. The CSS code is mostly some cool effect on the images.

I'm trying to group every couple of image and text into a single div (class="par") to add a hover effect to it.

I tried every single post I found here and several others I found on the internet. I don't know what else should I do. Maybe my CSS is messing with me.

What can I do, guys? Thank you in advance.

Upvotes: 0

Views: 846

Answers (2)

tnschmidt
tnschmidt

Reputation: 1196

You could add something like this to add hover effect to all .par children:

.par:hover *{
 background-color:blue;   
}

Here's the fiddle

Upvotes: 1

Downgoat
Downgoat

Reputation: 14361

If you want a div on hover to affect a child, use CSS descendent selectors.

.par {
}

.circular {
  background-image: url(http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg);
  width:100px;height:100px;
  
  opacity: 1;/*this is important*/
  transition: opacity 0.2s linear;/*for a fade effect*/
}

.par:hover .circular {
  opacity: 0;/*this is the result value*/
}

.par:hover {
  background-color:red;
}
<div class="par">
   <div><div class="circular"a</div></div>
   <div>Text1</div>
</div>

Upvotes: 2

Related Questions