CODEWITHSUNDEEP
htmlcssimage
Carl
Carl

Reputation: 357

Why I can't make a transition for images in css?

So I have a div which contains some logos. When i hover over them they should become colored instead of grey and pop up, but for some reason the transition doesn't work.

Here's the code of the div in html:

<div class="clients">
      <img src="img/myob.png">
     <img src="img/belimo.png">
      <img src="img/LifeGroups.png">
      <img src="img/Lilly.png">
      <img src="img/Trustly.png">
      <img src="img/Citrus.png">
    </div>

Code of css:

.clients{
  width:100%;
  height:120px;
  background-color: #f1f1f1;
  align-items: right;
  justify-content: center;
}

.clients img{
  display:inline-block;
  margin-left: 100px;
  width:100px;
  height:100px;
  padding: 15px 0;
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  object-fit: contain;
  filter: grayscale(100);
}

So I used transition for images to pop up and become colored, but when I hover over there's no reaction.

A picture of div:

enter image description here

How it should be: enter image description here

Upvotes: 0

Views: 182

Answers (2)

Abin Thaha
Abin Thaha

Reputation: 4633

Transition works on images. Check the below snippet.

img {
  width: 200px;
  filter: grayscale(100);
  transition: all 0.3s ease;
}

img:hover {
  filter: grayscale(0);
}
<span>
  <img src="https://assets.dragoart.com/images/11939_501/how-to-draw-iron-man-easy_5e4c9ed9b16b58.14188289_53732_3_3.png" />
</span>

Upvotes: 1

mpmcintyre
mpmcintyre

Reputation: 697

You do not seem to have a :hover statement, try adding this:

.clients img:hover{
  transition: all 0.4s ease-in-out;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  filter: grayscale(0%);
}

Upvotes: 1

Related Questions