CSS Element Transition/Animation: Opacity Issue

Question

First, here is the page I'm referencing: https://hypemarketing.co.uk/portfolio/

I've been trying to figure out how the transition effect on these logos work in Chrome's inspect element console for hours. Essentially the logo transitions to underlying text upon hovering but when trying to recreate the effect using what I thought the mechanism properties were, z-index, transform, and transition, I couldn't get it to trigger. I've searched through MDN, W3Schools, and other Stack Overflow pages but couldn't find a clear explanation.

Can someone please explain to me how this effect works? Appreciate any help with this!

Note: I'm new to coding so forgive me if the answer to this is super simple.

Update: Thanks to a commenter below I learned how the effect works! However on trying it for myself I still couldn't get it to trigger. I found a similar answer on SO that mentioned visibility, but after inserting the code still didn't run. I'm not sure where the issue is. Here is my code: https://jsfiddle.net/eyd0jdap/

HTML:

<div class="container">
  <img class="logo" src="http://www.pngall.com/wp-content/uploads/2016/06/Nike-Logo-Free-PNG-Image.png">
  <p class="services"> This is sample text.
    <br> And some more sample text.</p>
</div>

CSS:

    .container {
  position: relative;
  background-color: lightblue;
  display: block;
  height: 300px;
  width: 300px;
  z-index: -10;
}

.logo {
  height: 150px;
  width: 150px;
  z-index: 2;
  padding-top: 80px;
  padding-left: 80px;
  visibility: visible;
  opacity: 1;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.logo:hover {
  opacity: 0;
  visibility: hidden;
}

.services {
  position: absolute;
  left: 25px;
  top: 35%;
  font-family: "times new roman";
  font-size: 22px;
  text-align: center;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.services:hover {
  opacity: 1;
  visibility: visible;
}

When you inspect the elements in your browser developer tools, you can "toggle" the hover state (in Chrome dev tools for example, if you click on an element in the "Elements" tab, three dots "..." appear at the very left, click and select :hover). Do that on one of the div elements with the portfolio-block class, and then check the styles that get applied for its descendant elements. — C3roe
– C3roe, Commented Nov 5, 2017 at 4:33
You'll find that the logo gets faded into the background by transitioning its opacity from 1 to 0, and for the text inside the hovered-categories paragraph element it is the other way around, 0 to 1, to make it fade in, and at the same time the element is moved upwards via transform: translate3d(0, -50%, 0) — C3roe
– C3roe, Commented Nov 5, 2017 at 4:33
@CBroe Thank you so much for your help! Your explanation helped a lot. I created a code to test it out but unfortunately it didn't run so I've edited my question to include it and hopefully see where I went wrong. — TC Headley
– TC Headley, Commented Nov 5, 2017 at 14:58

Cole Faraday · Accepted Answer · 2017-11-05 16:27:09Z

1

There are a few problems with your implementation of this. Firstly you need to remove the z-index from your css as it is unnecessary and causes a few problems down the line. Now change the :hover event so it is dependant on the container not the text and logo. This means they will always fade out/in in sync with each other.

.container:hover > .logo{
  opacity: 0;
}

.container:hover > .services{
  opacity: 1;
}

The rest of the code remains the same. Link to codepen: https://codepen.io/pixelshadow/pen/BmKOdP?editors=1100

answered Nov 5, 2017 at 16:27

Cole Faraday

1806 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Element Transition/Animation: Opacity Issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related