Enhance images with a dynamic hover effect using CSS on MouseOver

Looking for a hover effect on the project section of the portfolio.

The layout is created using CSS Grid, and upon hovering, a responsive link to view the Live Demo should appear with animation transition.

Attempted to implement the hover effect but it ended up affecting the layout negatively.

The requirement is to use only CSS hover animations without any Javascript.

The hover effect needs to display the link smoothly.

@DylanScript provided a solution, but it's not functioning properly. Refer to the attached image. https://i.sstatic.net/emwN3.jpg

Here is a second image for reference: https://i.sstatic.net/9gI1L.jpg

* {
  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>

cssanimation

Answer №1

The issue arises from using position: absolute on img and .infobar, however, when changing it to position: relative, the animations work as intended:

.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;
}

I hope this explanation clears things up for you.

Answer №2

The issue lies with the position and margin-bottom properties in your code.

Please make the following updates:

.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 the following code:

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

UPDATED

Change the position property of your .item class to relative:

.item{
    position: relative;
}

Then, update the position property of .infobar to absolute. Also adjust the height, margin-bottom, and padding values for the 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;
}

For smoother transitions, ensure the duration of the transition property on the p elements matches that of .infobar:

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

I hope this guidance helps resolve the issue. You can also view the updated code here.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When the specified width is reached, jQuery will reveal hidden circular text upon page load instead of keeping it hidden

My current issue involves utilizing jQuery to hide circular text when the window width is below 760px. Although the functionality works as intended, there is a minor problem when the page loads under 760px width - the text briefly shows up before hiding ag ...

javascripthtmljquerycss

Looking for a way to prevent a div element from scrolling in JQuery Mobile?

Here is my implementation: http://jsfiddle.net/coderslay/Lhb5Y/ I have content structured like this: <div data-role="content"> <div><!--Contains a button --></div> <div><ul>..<!--Contains a list -->...</ ...

jqueryhtmlcssjquery-mobile

Tips for achieving full width with Bootstrap

Recently, I delved into the world of bootstrap and encountered some trouble setting my width to 100%. Despite trying to assign width:100%; in my container CSS, it didn't seem to work. The only workaround I found was using container-fluid no-padding in ...

htmlcssbootstrap-5

Is it possible to customize the placement of the login or register success message?

I would like to display a message indicating whether the login/register process was successful or not above my form. I am using Boostrap 3 along with some PHP functions. The message appears above my navbar but vanishes after 3 seconds, which is a bit anno ...

phphtmlcsstwitter-bootstrap

Preparing to dive into the world of HTML5

As a desktop application developer, I am considering diving into the world of HTML5. However, with limited published books and information available for beginners due to its unreleased status, I am debating whether to start with HTML4 and current web devel ...

javascriptcsshtml

How to retrieve the value of an element within a facebox div with jquery

On my page, I have two div tags displayed below. Whenever I try to retrieve the value of the itemName element using $('#itemName').val();, it always returns the value of the element in the first div (which is blank). Is there a way to access the ...

javascriptjquerycss

Understanding the integration of sass with webpack in an Angular 4 project

Is it possible to reference a sass file instead of a css file directly in the index.html? If so, how does webpack compile the sass into a css file? Additionally, what is the most effective way to bundle the sass file when building the application? The ve ...

cssangularwebpacksass

Positioning a fixed element in relation to a specific DIV: Tips and Tricks

An issue I am facing is with a DIV element that needs to always be positioned in the upper right corner of another DIV. Initially, using absolute positioning seems like the solution, but when the parent DIV has a scroll function, the first DIV disappears f ...

htmlcss

Tips for adjusting the dimensions of a child element to match its parent in Angular 12 with Typescript

I have included the child component in the parent component and I am displaying that child component within a col-md-8. What I want to achieve is to highlight a specific div in the child component with additional text, making it equal in size to the parent ...

cssangulartypescript

What is the best way to ensure a grid element has a column designated for each of its children?

Imagine this HTML structure: /* Desired styling: */ .container { display: grid; grid-template-columns: 250px 250px 250px /* this is the part to automate */ grid-template-rows: 50px; } .child { width: 100%; height: 100%; background: ...

htmlcss

There is excessive space beneath the text

I am struggling with aligning text vertically to match the chevrons. I have attempted various CSS properties like removing paddings/margins, setting line-height to 1, using text-decoration: none, text-align: center, and vertical-align: middle on my <p&g ...

css

Guide to dynamically refreshing a section of the webpage while fetching data from the database

I'm currently developing a website using PHP & MySQL where some queries return multiple records. Each record has its own dedicated page, allowing users to navigate between them using arrows. So far, everything is working smoothly. However, I've ...

phpjqueryhtmlmysqlcss

Parent div contains three child divs without automatically resizing

I'm new to web design and I'm curious about how to achieve a layout like this: <div id="container_m"> <div id="left"> <p>My name is Barnabas</p> </div> <div id="right"> <p>For ...

cssdynamichtmlparent-child

Can cards be designed with a color gradient background using a radial gradient?

I'm trying to create a card with a gradient background color. Expected: I want the background color to be a gradient (like the green color behind the image) https://i.sstatic.net/ujiuz.png Actual: Currently, the background color is not a gradient an ...

htmlcssstyled-componentscard

What is the best way to ensure the sidebar occupies the entire page height?

Hey there! I am currently working on a Bootstrap page that includes some lorem text and a sidebar. However, I am facing an issue where the sidebar does not fill the screen vertically when the content on the page is smaller than the window size. Can someone ...

htmlcssbootstrap-5

The content of my menu is concealed within a DIV. It may remain hidden or malfunction

I am in the process of creating master pages. In one of the master pages, I have implemented a dropdown menu using jQuery and CSS. While it works perfectly fine on some pages, it seems to be hidden on others that contain a div element. This is because the ...

jqueryhtmlcss

Jquery: showcasing a variety of delayed animation effects

Check out this code snippet: http://jsfiddle.net/vb4af/3/ $(".add").click(function (e){ $(this).parent().animate({width: "70%"}, 400); return false; }); $(".addall").click(function (e){ $(".add").each(function (){$(this).click().delay(100);}) ...

jqueryanimationdelay

Animating for when the window is fully loaded

Using the three.js gltf loader to import an object and manipulate it has been a smooth process so far. The orbit controls and event listeners are functioning correctly. I am now looking to implement a new feature where, upon loading the window, the object ...

animationthree.jsonload

Show an Angular Mat Card beneath the Input Field and position it on top of all other div elements

I am designing a signup page and I need to include a material card below the password field with checkboxes for password requirements. The challenge is that when the card appears, it pushes down all other elements such as the sign-up button. I want the ca ...

htmlcssangularangular-material

Tips for altering the design of a registration page

I'm struggling to modify my registration page layout so that the avatar is positioned on the left while the username, password input boxes are on the right. I attempted to use split divs without success and also tried adjusting the positioning of the ...

htmlcssformsavatar