Hover effect on MouseOver using CSS on image

user_11463943 0
Viewed 394

Want a hover effect on project section of the portfolio.

The layout is made up of CSS Grid and On Hover the link to view Live Demo should appear responsive. Animation transition

Tried but the hover effect but messed up the layout.

It must be using css hover animation only and NO Javascript.

The hover effect to show the link .

@DylanScript gave the solution but not working porperly. Attached image enter image description here

Second image for reference enter image description here

* {
  box-sizing: border-box;
}

body {
  height: 100%;
  margin: 0;
  line-height: 1.5;
}

a {
  color: #fff;
  text-decoration: none;
}

.projects {
  display: grid;
  grid-gap: 0.7rem;
  grid-template-columns: repeat(3, 1fr);
}

.projects img {
  width: 100%;
  border: 3px #fff solid;
}

.projects img:hover {
  opacity: 0.5;
}

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  padding: 10px;
  text-align: left;
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: -30%;
  transition: .3s ease-in-out;
  background: #413a44;
}

.infobar p {
  opacity: 0;
  margin: 0;
  transition: .6s ease-in-out;
}

.item:hover .infobar {
  bottom: 0%;
}

.viewBar:hover p {
  opacity: 1;
}

.viewBar img {
  position: absolute;
  left: 0;
  bottom: 0%;
  transition: .32s ease-in-out;
}

.viewBar:hover img {
  bottom: 30%;
}

.item:hover {
  transform: scale(1.01);
  filter: grayscale(0.6);
}

@media screen and (min-width: 1171px) {
  .projects {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 769px) and (max-width: 1170px) {
  .projects {
    grid-template-columns: repeat(3, 1fr);
  }
}
<nav>

</nav>
<main>
  <div class="projects">
    <div class="item viewBar">
      <a href="#">
        <img src="https://source.unsplash.com/1600x899/?water">
      </a>
      <div class="infobar">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <a href="#" class="btn-light">
                            Demo...
                        </a>
        </p>
      </div>
    </div>
    <div class="item viewBar">
      <a href="#">
        <img src="https://source.unsplash.com/1600x899/?water">
      </a>
      <div class="infobar">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <a href="#" class="btn-light">
                            Demo...
                        </a>
        </p>
      </div>
    </div>

    <div class="item viewBar">
      <a href="#">
        <img src="https://source.unsplash.com/1600x899/?water">
      </a>
      <div class="infobar">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <a href="#" class="btn-light">
                            Demo...
                        </a>
        </p>
      </div>
    </div>


  </div>

</main>

<footer>

</footer>

animation css
2 Answers

The problem is position: absolute on img and .infobar, by applying position: relative the animations perform correctly:

.viewBar img {
  position: relative; ##########
  left: 0;
  bottom: 0%;
  transition: .32s ease-in-out;
}

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  padding: 10px;
  text-align: left;
  width: 100%;
  height: 30%;
  position: relative; ###########
  bottom: -30%;
  transition: .3s ease-in-out;
  background: #413a44;
}

Hope this helps

user_92531720

Your position and margin-bottom are the ones causing the problem.

update

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  padding: 10px;
  text-align: left;
  width: 100%;
  height: 30%;
  position: relative;
  transition: .3s ease-in-out;
  background: #413a44;
}

.viewBar img {
  position: relative;
  left: 0;
  bottom: 0;
  transition: .32s ease-in-out;
}

remove 

.viewBar:hover img {
  bottom: 30%;
}

UPDATED

set your .item position to relative

.item{
    position: relative;
}

then .infobar position to absolute. I also changed the height margin-bottom padding in order to achieve your desired effect

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  text-align: left;
  width: 100%;
  /* updates */  
  height: 0;
  position: absolute;
  z-index: 1;
  bottom: 0;
  /* end updates */  
  transition: .3s ease-in-out all;
  background: #413a44;
}

Then on .item:hover

.item:hover .infobar {
  height: 30%;
}

change the transition duration on the p to .3s same as the .infobar to get a smoother effect.

.infobar p {
  opacity: 0;
  margin: 0;
  transition: .3s ease-in-out;
}

Hope this helps.

here the pen https://codepen.io/crazychukz/pen/VJyOJj

user_29506090
Related