The button animation will only activate with a particular margin setting

I am encountering a strange issue with my code. The button CSS animation only works when the margin-top is set to 125px for the sim-button class. I want to reduce the margin-top to 25px, but then the animation does not work.

Check out the Codepen here

Example HTML:

<div class="media" style = "background-color:#000;">
                          <img class="media__image" src="https://www.offensive-security.com/wp-content/uploads/2012/01/security-risk-assessment-report.png">
                          <div class="media__body">
                            <h2>Penetration Report</h2>
                            <p>Get your hands on our Sample Presentation Report</p>
                            <div class="sim-button button1" data-toggle="modal" data-target="#getQuoteModal">Download Report</div>
                          </div>
                        </div>

CSS Styling:

    .media {
  display: inline-block;
  position: relative;
  vertical-align: top;
}

.media__image { display: block; }

/* Additional CSS styles and properties are listed here */

.sim-button{
    line-height: 50px;
    height: 50px;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    margin-top: 125px; /* Issue with margin-top */
    width: 60%;
    cursor: pointer;
}
.button1 {
    color: rgba(255,255,255,1);
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    position: relative;
    border: 1px solid rgba(255,255,255,0.5);
}
.button1 a{
    color: rgba(51,51,51,1);
    text-decoration: none;
    display: block;
}
.button1:hover {
    background-color: rgba(255,255,255,0.2);
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;    
}

Thank you in advance for any assistance provided.

htmlcss

Answer №1

Your button seems to be hidden beneath your overlay:

z-index: 1;

By adding the above code into your sim-button class, you can bring your button to the front and allow it to be hovered over for the animation to activate.

I have created a fiddle with this change made: Check out the updated jsfiddle here

Answer №2

Here's another method to ensure that the text remains selectable and the button effect works while also being clickable: set z-index: 1 on .media__body, and then set z-index: -1 on the ::before/::after pseudo elements. This arrangement will position the pseudo elements behind all content in .media__body, preventing them from going behind .media__body

.media {
  display: inline-block;
  position: relative;
  vertical-align: top;
}

.media__image {
  display: block;
}

.media__body {
  background: rgba(41, 128, 185, 0.7);
  bottom: 0;
  color: white;
  font-size: 1em;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 3.75em 3em;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
  z-index: 1;
}

.media__body:hover {
  opacity: 1;
}

.media__body:after, .media__body:before {
  border: 1px solid rgba(255, 255, 255, 0.7);
  bottom: 1em;
  content: '';
  left: 1em;
  opacity: 0;
  position: absolute;
  right: 1em;
  top: 1em;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.6s 0.2s;
  transition: 0.6s 0.2s;
  z-index: -1;
}

.media__body:before {
  border-bottom: none;
  border-top: none;
  left: 2em;
  right: 2em;
}

.media__body:after {
  border-left: none;
  border-right: none;
  bottom: 2em;
  top: 2em;
}

.media__body:hover:after, .media__body:hover:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.media__body h2 {
  margin-top: 0;
}

.media__body p {
  margin-bottom: 0em;
}

.sim-button {
  line-height: 50px;
  height: 50px;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  margin-top: 25px;
  width: 60%;
  cursor: pointer;
}
.button1 {
  color: rgba(255, 255, 255, 1);
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
.button1 a {
  color: rgba(51, 51, 51, 1);
  text-decoration: none;
  display: block;
}
.button1:hover {
  background-color: rgba(255, 255, 255, 0.2);
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  border-radius: 25px;
}
<div class="media" style="background-color:#000;">
  <img class="media__image" src="https://www.offensive-security.com/wp-content/uploads/2012/01/security-risk-assessment-report.png">
  <div class="media__body">
    <h2>Penetration Report</h2>
    <p>Get your hands on our Sample Presentation Report</p>
    <div class="sim-button button1" data-toggle="modal" data-target="#getQuoteModal">Download Report</div>
  </div>
</div>

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

Tips for incorporating border-radius when converting HTML to PDF with xhtmltopdf

I'm having trouble getting the corners of my table to round properly. When I convert the following HTML to a PDF using the xhtmltopdf PDF generator, the border-radius property doesn't seem to work. Below is the HTML code for the content file name ...

pythonhtmldjango-templatesxhtml2pdf

Connecting images and text from a distance

After days of researching this topic, I have not found any solutions that align exactly with what I am trying to achieve. I believe it should be a simple task using just HTML and CSS, but I seem to be facing some difficulties. Initially, my goal was to ma ...

htmlcss

Is there a way for me to set a default filename when saving an HTML page?

On my webpage, such as www.example.com/NYSE/rates, I want to give the user the option to save the HTML they see on their local disk. When they click "Save as", I would like to automatically set the default filename to be NYSE_rates_09_12_2011.html. This fi ...

html

What causes CSS to fail to load in React but work normally in Next.js?

We are currently experiencing an issue with a component located in a Git Submodule that is being used by both Next.js and React. While everything is functioning correctly in Next.js, React is unable to accept the way the CSS is being loaded: import styles ...

javascriptcssreactjs

Unable to dynamically update properties in CSS and JavaScript without refreshing the page

I've tried applying active properties in my CSS and JavaScript, but it doesn't seem to be working as expected. I can click on each list item, but the active state is not being displayed correctly. Can someone please assist me with this issue? I w ...

javascripthtmlcss

Invisible floating div above applet within iframe on Chrome not displaying

When loading an external page with an applet in an iframe, I encountered an issue with displaying a floating div above the iframe. Setting position relative or absolute on the containing divs and a higher z-index on the floating div worked in Firefox, but ...

htmlcssgoogle-chromeiframeapplet

What is the best way to ensure the proper formatting of my initial form?

Hello, I am encountering some challenges with formatting my form. As a beginner in web coding, I apologize for what may seem like a simple issue - this is the first form I am attempting to code. My objective is as follows: On screens and tablets: have fo ...

htmlcssflexbox

PHP query returned no matches

<?php include 'db.php'; $GLOBALS["conn"] = connect(); if (isset($_POST['submit'])) { $ime = $_POST['ime']; $rm = $_POST['rm']; $minpl = $_POST['minpl']; $maxpl = ...

phphtmlmysql

IE does not support hover effects

Having trouble with a hover effect that works in Chrome but not in MSIE. Are there any alternatives or fixes to make it work in MSIE? The hover/rollover effects I've tried all seem to have this issue in IE. normalize.css demo.css set2.css font- ...

javascripthtmlcss

Adding an external JavaScript file to an HTML document by importing an array

Having trouble loading an array from an external JS file into my HTML. Snippet from js.js: var temp_max = [4,9,2,5,8,4,2,10]; In the HTML: Note: Be sure to download DateJS and place it in "DATE-JS"!! <!doctype html> <html> ... (HTML c ...

javascripthtmlarrays

JQuery fails to remove the "display:hidden" attribute

List of methods I attempted: Utilizing .removeClass and addClass functions Applying show() and hide() methods Modifying the CSS properties Initially, I confirmed that my script contains onLoad. Furthermore, all other elements are functioning correctly. D ...

javascripthtmljquery

Utilizing the dynamic flair with React's map functionality

In my display area, which is a div element, I have rendered some text using spans. I utilized the map function to render the text from an array. The issue arises when I apply a color class to the span elements within the map function, causing all text to ...

javascripthtmlcssreactjsdictionary

Console not displaying any logs following the occurrence of an onClick event

One interesting feature I have on my website is an HTML div that functions as a star rating system. Currently, I am experimenting with some JavaScript code to test its functionality. My goal is for the console to log 'hello' whenever I click on ...

javascripthtmlcss

What is the best way to prevent the span text from wrapping to the next line depending on the content of the previous span element using CSS?

i want to ensure the span elements text remains fixed to two lines within a flexbox. What is my goal? https://i.stack.imgur.com/k0GhL.png I am aiming to achieve something similar to the image above. The issue arises when the value in '/400' be ...

htmlcssreactjs

retrieve the data-task-IDs from the rows within the table

I am currently working with a table that looks like this: <table id="tblTasks"> <thead> <tr> <th>Name</th> <th>Due</th> ...

javascriptjqueryhtmlcss

What is the method to execute jQuery code after the completion of a fade out effect?

I am attempting to fade out a div upon click while also adjusting some CSS properties. The problem I am encountering is that the CSS properties change during the fade out transition, instead of after it has completed. I would like the values to change onc ...

javascriptjquerycss

Is there a way to target only the md breakpoint for applying flex-wrap in CSS?

Having trouble figuring this out. I'm utilizing Bootstrap 4 with a flex container containing 8 div elements. I want the divs to not wrap on medium screens and up, but to wrap when the screen size is below that. I attempted using flex-md-wrap, which h ...

htmltwitter-bootstrapbootstrap-4flexbox

My navigation bar is giving me a bit of trouble, as there are two separate issues that seem to be interconnected

Looking for some help with my navigation bar layout. You can also check out the code on fiddle http://jsfiddle.net/SgtRx/ (should have done this earlier, sorry). I'm a beginner when it comes to coding, so please bear with me if I make any mistakes. ...

htmlcss

Ways to resolve the issue of undefined $route.current in AngularJS

I have recently started using AngularJS and I am encountering an error "TypeError: $route.current is undefined". Please refer to the code snippet below: var sampleApp = angular.module('sampleApp', ['ngRoute']); sampleApp.config([&ap ...

htmlangularjsangularjs-routing

Sort data by checking either multiple or single checkbox options in AngularJS; if none are selected, display all results

My goal is to implement a filter in my AngularJS code that will filter data based on selected checkboxes. If no checkbox is selected, all results should be displayed without any filtering. Currently, the issue I am facing is that the data is only displayed ...

javascripthtmlangularjsfilter