CODEWITHSUNDEEP
css
nived
nived

Reputation: 141

How to style image inside multiple classes

I have the following structure of classes.

<div class="row newsfeed"> 
    <div class="col-xs-6 col-md-4"> 
        <div class="card"> 
            <div class="wrapper_newsfeed"> 
                <img class="card-img-top img-fluid" src="../resources/img/og_logo.jpg" alt="image">
            </div> 
        </div> 
    </div> 
</div>

I want to style the image using .newsfeed and .card. This is what I tried:

.newsfeed .card > .card-img-top {
    border-radius: 0;
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
}
.newsfeed .card:hover > .card-img-top {
    filter: brightness(120%);
    -webkit-filter: brightness(120%);
}

But it's not working. I tried different ways but they didn't work either and I think this one is the closest. What is wrong?

Upvotes: 2

Views: 210

Answers (3)

Takit Isy
Takit Isy

Reputation: 10081

The problem here is that .card-imt-top is not a direct child of .card!

You shouldn't be using the direct child selector >.

Here is a working snippet where I added an image:

.newsfeed .card{ /* Added to see the div */
  border: 1px solid gray;
}

.newsfeed .card .card-img-top {
    border-radius: 0;
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
}
.newsfeed .card:hover .card-img-top {
    filter: brightness(120%);
    -webkit-filter: brightness(120%);
}
<div class="row newsfeed">
  <div class="col-xs-6 col-md-4">
    <div class="card">
      <div class="wrapper_newsfeed">
        <img class="card-img-top img-fluid" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRWRHRpOLWW0U-Sxw8Kcdkf_AFvbL1-9pNmBxWIUGfPSprrY2o6" alt="image" width="100" height="100">
      </div>
    </div>
  </div>
</div>

Hope it helps.

Upvotes: 4

melvin
melvin

Reputation: 2621

.newsfeed .card .card-img-top {
    border-radius: 0;
    filter: brightness(100%);
    -webkit-filter: brightness(100%);
}

.newsfeed .card:hover .card-img-top {
filter: brightness(120%);
-webkit-filter: brightness(120%);
}

I think this works. > is direct child selector, which is wrong in this case.

Upvotes: 1

Canta
Canta

Reputation: 1480

.card-img-top isn't direct child of .card because you have .wrapper_newsfeed between, so you can't use > selector.

.newsfeed .card .card-img-top {
  border-radius: 0;
  filter: brightness(100%);
  -webkit-filter: brightness(100%);
}
.newsfeed .card:hover .card-img-top {
  filter: brightness(120%);
  -webkit-filter: brightness(120%);
}

Upvotes: 1

Related Questions