CODEWITHSUNDEEP
htmlcsscss-transitionstransform
Monstryyy
Monstryyy

Reputation: 81

Background changes while using transform()

I have this test setup. When I hover over the "Block 1" it should get transformed while keeping its integrity. What I see is that background color is changing. It seems like it's all about background of that .blocks:after element. (if I comment that, background of element won't change while hovering over).

So, what could cause a problem?

Source - https://jsfiddle.net/1k5e2090/6/

body {
  background: #d3d3d3;
}

.blocks {
  display: flex;
  position: relative;
  width: 150px;
  height: 55px;
  margin: 25px;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: 'Helvetica', sans-serif;
  font-size: 20px;
}

.blocks#block1 {
  background: #4BACC6;
  left: 500px;
  top: 200px;
}

.blocks#block2 {
  left: 500px;
  top: -50px;
  background: #9BBB59;
}

.blocks#block3 {
  left: 200px;
  top: -45px;
  background: #C0504D;
}

.blocks:after {
  position: absolute;
  content: '';
  background: #F2F2F2;
  top: -7px;
  left: -7px;
  right: -7px;
  bottom: -7px;
  z-index: -1;
}

.blocks#block1:after {
  box-shadow: 3.5px 5.5px 1px -1px rgba(75, 172, 198, 0.45);
}

.blocks#block2:after {
  box-shadow: 3.5px 5.5px 1px -1px rgba(155, 187, 89, 0.45);
}

.blocks#block3:after {
  box-shadow: 3.5px 5.5px 1px -1px rgba(192, 80, 77, 0.45);
}

.blocks#block1:hover {
  transition: 1s ease;
  transform: translate(-100px);
 }

Upvotes: 0

Views: 81

Answers (3)

Abhijeet
Abhijeet

Reputation: 819

In place of using before and after use simple border on blocks and gives box shadow, This is happened because you use position absolute in before and after so when a block moves before and after adopt automatically.Hope it work Simple use border around the block and remove before and after your problem will solved

Upvotes: 1

Lucian
Lucian

Reputation: 1713

.blocks {
  border: 7px solid #f2f2f2;
}

i have edited your fiddle https://jsfiddle.net/1k5e2090/9/

you have used the border as a :pseudo element which is not necessary. it is actually creating the problem

Upvotes: 1

Nutshell
Nutshell

Reputation: 8537

It's because of the :after behavior on .blocks elements. See this fiddle

 .blocks:hover:after { border: 6px solid #fff; background: transparent;  z-index: -2;  }

Upvotes: 1

Related Questions