Ways to lift my div element using hover effect

Question

Ways to lift my div element using hover effect

Having a bit of trouble with my code here. I've noticed that when I hover over the div, it cuts off part of my image and removes the padding from the top. Any ideas on how to move the div up when hovering without cutting off the image?

.move {
  transition: all 0.4s ease-in;
}

.hover:hover .move {
  margin-top: -50px;
}

.hover:hover {
  background: black;
}

.readmore {
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-out;
}

.hover:hover .readmore {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

<div class="container mt-5 pt-5 ">
  <div class="row d-flex justify-content-center text-center  ">
    <div class="col-md-3  hover p-0">
      <div class="position-relative  move  d-flex  align-items-end p-1 ">
        <div class="position-absolute pb-3">
          <h1 class="headersize">asd</h1>
          <p class="small-text">
            Small text
          </p>
        </div>
        <img src="https://encrypted-tbn0.gstatic.com/images? 
      q=tbn:ANd9GcQzp0rXN9BsNzMPYmzdT6xWc931So2I5sA4YiBX4Nm0rT6MiPBS" class=" 
      mb-4" />
      </div>
      <div class=" mb-3">
        <button type="button" class="readmore p-2 m-2    ">
                    Read More
                  </button>
      </div>
    </div>
  </div>
</div>

html css bootstrap-4 hover

Answer 1

Answer №1

It's interesting how applying negative margins within a display: flex container doesn't impact the container element's margin, resulting in its background color remaining unchanged even when the child element .move has a negative margin.

If you encounter this issue, one solution could be to avoid using flexbox in your code.

Alternatively, you can experiment with adding a negative margin-top to the same element that undergoes a change in background-color on hover:

/* .hover instead of .move */
.hover {
  transition: all 0.4s ease-in;
}

.hover:hover {
  margin-top: -50px;
}

.hover:hover {
  background: black;
}

This approach allows you to both color and move the same element, creating a seamless animation effect. Keep in mind that assigning a background color to .container or .row may result in the same unexpected behavior.

Answer 2

It's interesting how applying negative margins within a display: flex container doesn't impact the container element's margin, resulting in its background color remaining unchanged even when the child element .move has a negative margin.

If you encounter this issue, one solution could be to avoid using flexbox in your code.

Alternatively, you can experiment with adding a negative margin-top to the same element that undergoes a change in background-color on hover:

/* .hover instead of .move */
.hover {
  transition: all 0.4s ease-in;
}

.hover:hover {
  margin-top: -50px;
}

.hover:hover {
  background: black;
}

This approach allows you to both color and move the same element, creating a seamless animation effect. Keep in mind that assigning a background color to .container or .row may result in the same unexpected behavior.

Answer 3

Answer №2

I made some adjustments here in hopes that it will provide assistance

.move, .mb-3, .hover {
  transition: all 0.4s ease-in; 
  }

.hover {
  position: relative;
  /* height: 80px; */
}
 .hover:hover .move {
  margin-top:-50px;
  background: black;

}

.hover:hover .mb-3 {
  background : black;
  transition: all 0.4s ease-out;
  
}



 .hover:hover {
 background: black;
 }

.readmore {
 opacity: 0;
 /* visibility: hidden; */
 transition: all 0.4s ease-out;
 }

.hover:hover .readmore {
 opacity: 1;
 /* visibility: visible; */
 transform: translateY(0);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<body>
<div class="container mt-5 pt-5 ">
 <div class="row d-flex justify-content-center text-center  ">
 <div class="col-md-3  hover p-0">
 <div class="position-relative  move  d-flex  align-items-end p-1 ">
              <div class="position-absolute pb-3">
                <h1 class="headersize">asd</h1>
                <p class="small-text">
                 Small text
                </p>
              </div>
 <img src="https://encrypted-tbn0.gstatic.com/images? 
  q=tbn:ANd9GcQzp0rXN9BsNzMPYmzdT6xWc931So2I5sA4YiBX4Nm0rT6MiPBS" class=" 
  mb-4" />
            </div>
            <div class=" mb-3">
              <button
                type="button"
                class="readmore p-2 m-2    "
              >
                Read More
              </button>
            </div>
          </div>
</div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Answer 4

I made some adjustments here in hopes that it will provide assistance

.move, .mb-3, .hover {
  transition: all 0.4s ease-in; 
  }

.hover {
  position: relative;
  /* height: 80px; */
}
 .hover:hover .move {
  margin-top:-50px;
  background: black;

}

.hover:hover .mb-3 {
  background : black;
  transition: all 0.4s ease-out;
  
}



 .hover:hover {
 background: black;
 }

.readmore {
 opacity: 0;
 /* visibility: hidden; */
 transition: all 0.4s ease-out;
 }

.hover:hover .readmore {
 opacity: 1;
 /* visibility: visible; */
 transform: translateY(0);
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<body>
<div class="container mt-5 pt-5 ">
 <div class="row d-flex justify-content-center text-center  ">
 <div class="col-md-3  hover p-0">
 <div class="position-relative  move  d-flex  align-items-end p-1 ">
              <div class="position-absolute pb-3">
                <h1 class="headersize">asd</h1>
                <p class="small-text">
                 Small text
                </p>
              </div>
 <img src="https://encrypted-tbn0.gstatic.com/images? 
  q=tbn:ANd9GcQzp0rXN9BsNzMPYmzdT6xWc931So2I5sA4YiBX4Nm0rT6MiPBS" class=" 
  mb-4" />
            </div>
            <div class=" mb-3">
              <button
                type="button"
                class="readmore p-2 m-2    "
              >
                Read More
              </button>
            </div>
          </div>
</div>
  </div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Ways to lift my div element using hover effect

Answer №1

Answer №2

Similar questions

When there are more than two divs on the page, they tend to overflow beyond the boundaries of

What could be causing my Ionic button to not initialize in the expected state while using ngIf with a boolean property connected to an Ionic checkbox?

Creating an invoice or money receipt using HTML is a straightforward process that involves using specific code and

elements that do not adhere to set width constraints

Generating containers in Angular using *ngFor

What is the reason behind the default disabling of bootstrap multiselect options?

"Key challenges arise when attempting to execute the node app.js script through the terminal due to various middleware compatibility

Listening to a song on a webpage while filling out the online form

Utilizing a fallback option for HTML5 video with a flash player and the ability to manipulate the

Problem with CSS: In Chrome, text fields have 3px additional margin-right

The fonts in node.js are not functioning as expected, without displaying any error messages

Individually hover over each section with CSS effects

How can I define the boundaries for the scrolling of a static background image?

Is there a way to combine all referenced pages into the main page using JQuery?

Discovering the exact distance between a 'li' and a 'div' element

``It has come to our attention that ALT texts are not displaying properly on popular email clients such as Outlook,

Create spinning wheel - canvas

A problem arose with Vitest when attempting to call the tRPC createCaller function due to the presence of incorrect JS syntax within the content. To resolve this issue, it is recommended to include

Move an object in relation to the right boundary of the viewport

Use jQuery to rearrange the order of elements on a webpage by moving a paragraph after a specific