Animation of CSS height when image/icon is hovered over

Question

Animation of CSS height when image/icon is hovered over

Having an issue with my icon when hovering. I am trying to change the img src on hover. Here is the code I currently have:

#aks {
  width: 0px;
  max-height: 0;
  transition: max-height 0.15s ease-out;
  overflow: hidden;
  background: url("https://img.icons8.com/windows/32/000000/like.png") no-repeat;
  padding: 50px;
}

#aks:hover {
  background: url("https://img.icons8.com/officexs/32/000000/like.png")
    no-repeat;
  max-height: 500px;
  transition: max-height 0.25s ease-in;
}

<img id="aks" src="https://img.icons8.com/windows/32/000000/like.png" />

My goal is to have the outline heart icon replaced by a filled heart icon upon hover. The transition should simulate the filling of the heart from bottom height 0 to full height, creating a visually appealing effect. This example illustrates what I am aiming for: codepen

I would greatly appreciate any alternative solutions or suggestions apart from the one provided. Thank you in advance!

html css css-animations

Answer 1

Answer №1

Creating a CSS-only animation for this design can be quite challenging as it involves applying the sliding effect to multiple separate elements - the rotated square and two circles.

To illustrate, here is a demonstration using a font that contains a heart symbol. I have utilized Webdings in this example, but it is recommended to use Font Awesome in a live coding environment.

In essence, the technique involves setting a background gradient that is twice the height of the text, with a split of 50% white and 50% red. Upon hover, the background shifts from displaying the white segment to revealing the red section. However, it's worth noting that certain properties implemented in this method may only function correctly on webkit browsers, such as text-stroke, which outlines the text, and background-clip, responsible for masking the non-text portion of the background within the span element.

span {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, white 50%, red 50%);
  color: transparent;
  font-family: webdings;
  font-size: 200px;
  transition: background-position 2s;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: red;
  text-stroke-width: 5px;
  text-stroke-color: red;
}
span:hover {
    background-position: 0 100%;
}

<span>Y</span>

Answer 2

Creating a CSS-only animation for this design can be quite challenging as it involves applying the sliding effect to multiple separate elements - the rotated square and two circles.

To illustrate, here is a demonstration using a font that contains a heart symbol. I have utilized Webdings in this example, but it is recommended to use Font Awesome in a live coding environment.

In essence, the technique involves setting a background gradient that is twice the height of the text, with a split of 50% white and 50% red. Upon hover, the background shifts from displaying the white segment to revealing the red section. However, it's worth noting that certain properties implemented in this method may only function correctly on webkit browsers, such as text-stroke, which outlines the text, and background-clip, responsible for masking the non-text portion of the background within the span element.

span {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, white 50%, red 50%);
  color: transparent;
  font-family: webdings;
  font-size: 200px;
  transition: background-position 2s;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke-width: 5px;
  -webkit-text-stroke-color: red;
  text-stroke-width: 5px;
  text-stroke-color: red;
}
span:hover {
    background-position: 0 100%;
}

<span>Y</span>

Answer 3

Answer №2

If you are considering using css, here is an interesting option for you:

.heart {
  background-color: red;
  height: 30px;
  width: 30px;
  transform: rotate(-45deg);
  transition: background-color 1s;
}

.heart::before,
.heart::after {
  content: '';
  background-color: red;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  position: absolute;
  transition: background-color 1s;
}

.heart::before {
  top: -15px;
}

.heart::after {
  left: 15px;
}

.heart:hover,
.heart:hover::before,
.heart:hover::after {
  background-color: #F5A9AE;
}

body {
  display: flex;
  height: 100vh;
}

.heart {
  margin: auto;
}

<div class="heart"></div>

Answer 4

If you are considering using css, here is an interesting option for you:

.heart {
  background-color: red;
  height: 30px;
  width: 30px;
  transform: rotate(-45deg);
  transition: background-color 1s;
}

.heart::before,
.heart::after {
  content: '';
  background-color: red;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  position: absolute;
  transition: background-color 1s;
}

.heart::before {
  top: -15px;
}

.heart::after {
  left: 15px;
}

.heart:hover,
.heart:hover::before,
.heart:hover::after {
  background-color: #F5A9AE;
}

body {
  display: flex;
  height: 100vh;
}

.heart {
  margin: auto;
}

<div class="heart"></div>

Answer 5

Answer №3

If you want to add a background animation, you can achieve it with the code snippet below:

.heart {
  width: 50px;
  height:50px;
  padding-top:50px;
  background: 
    url("https://img.icons8.com/officexs/32/000000/like.png") bottom padding-box content-box,
    linear-gradient(#fff,#fff) bottom padding-box content-box,
    url("https://img.icons8.com/windows/32/000000/like.png");
  background-size:100% 100%;
  background-repeat:no-repeat;
  box-sizing:border-box;
  transition:0.5s;
}

.heart:hover {
   padding-top:0;
}

<div class="heart"></div>

Answer 6

If you want to add a background animation, you can achieve it with the code snippet below:

.heart {
  width: 50px;
  height:50px;
  padding-top:50px;
  background: 
    url("https://img.icons8.com/officexs/32/000000/like.png") bottom padding-box content-box,
    linear-gradient(#fff,#fff) bottom padding-box content-box,
    url("https://img.icons8.com/windows/32/000000/like.png");
  background-size:100% 100%;
  background-repeat:no-repeat;
  box-sizing:border-box;
  transition:0.5s;
}

.heart:hover {
   padding-top:0;
}

<div class="heart"></div>

Animation of CSS height when image/icon is hovered over

Answer №1

Answer №2

Answer №3

Similar questions

Reduce the value in the database when a button is clicked using PHP

Using Column CSS Property with Google Maps in Chrome: A Potential Bug?

What is the best way to notify the user if the percentage entered is not a numeric value?

The animation in Material UI does not smoothly transition with the webkit scrollbar

Tips for maintaining the navigation tab's consistent appearance

How can I trigger my function in jQuery after inputting into the jQuery text field?

Gatsby's build process encounters a stumbling block when webpack fails due to issues

Utilizing jQuery to incorporate a radio input function in a POST request

Seeking particular section of online content in an asynchronous manner

Which particular files should be included such as CSS and JavaScript?

Reordering sections in a dynamic manner

Having trouble using jQuery to target the element "(this)"?

Using PHP and an HTML form to insert data into a MySQL database

Sending form input values to JavaScript

Ways to prevent an array from being reset

material-icons appear differently when letter-spacing is applied in iOS browsers

Revolutionizing Interaction: Unveiling the Power of Bootstrap 3

"Exploring the variations in design between wordpress.com and self-hosted wordpress

I'm not sure why, but for some strange reason, Markdown images refuse to display when surrounded by

Utilize ng-repeat to iterate over two arrays