Centering an icon vertically and introducing animation upon hovering over an image

I'm having difficulty with vertically centering an icon that drops down on image hover, and I want to make its transition smoother. Currently, it's dropping down too abruptly and no matter what transition property I apply (ease, ease-out, etc.), it remains the same.

Link to code example

<div class="fader">
    <a href="#">
      <img width="200" height="350" src="http://placehold.it/200x350"> 
      <span class="fa fa-search fa-3x"></span>
    </a>
</div>




.fader {
    position: relative;
    span.fa {
        position: absolute;
        top: -9999px;

        // center horizontally
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;

        transition: all 0.3s ease-out;
    }
    &:hover .fa {
        top: 50%;
    }
}
htmlcsspositioncss-transitions

Answer №1

A few points to consider.

The icon has made significant progress. It doesn't have to be positioned 9999px away, just enough to be offscreen (or you can apply overflow hidden to the parent and position it 1em off the top).

Consider changing the transition to something like transition: all 0.5s ease;...if it seems too quick, increase the duration.

The easing function should simply be ease instead of ease-out for a more natural appearance.

To adjust the centering, you'll need to move it back up by half its own height

  transform:translateY(-50%);


li {
        list-style: none;
        text-align: center;
      }
      .fader {
        position: relative;
        overflow: hidden;
        display: inline-block;
      }
      .fader img {
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        display: block;
      }
      .fader img:hover {
        opacity: 0.5;
      }
      .fader span.fa {
        color: #333;
        position: absolute;
        top: -1em;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
      }
      .fader:hover .fa {
        top: 50%;
      }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" />
      <li>
        <div class="fader">

          <a href="#">
            <img width="200" height="350" src="http://placehold.it/200x350"> <span class="fa fa-search fa-3x"></span>
          </a>
        </div>

      </li>

Answer №2

Your maximum value is incredibly high ;)

Simply adjust it to a more sensible value to conceal it and everything should work well for you : 

span.fa {
    color: #333;
    position: absolute;
    top: -80px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    transition: all 0.3s ease-out;
}

Code Example

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

Using Jquery to dynamically adjust the size of a div based on the width and height of the browser window

How can I dynamically change the height of a .test div based on the browser width and height? I want the value to update whenever the browser is resized. $(document).ready( function() { window.onresize = function(event) { resizeDiv(); ...

javascriptjqueryhtmlcss

IE does not support Overflow and Ellipsis in this table

FF v14 has the exact appearance I want. Unfortunately, IE9 is not cooperating as it does not hide overflow or display the ellipsis. Does anyone know how to resolve this issue for compatibility with IE9? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

htmlcsscross-browser

Spinning an SVG circle using a group element

I'm interested in rotating an SVG circle without affecting the rotation of other elements. https://i.sstatic.net/Be501.png My attempt to rotate the white circle using rotateZ(15deg) resulted in this: https://i.sstatic.net/GMp96.png This is the prog ...

csssvg

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

javascripthtmlcss

A comprehensive guide on transferring user input onto a php text file

I am trying to implement a feature in my PHP code where the contents entered in a text box are uploaded to a text file. However, I only want them to be written if the string contains a specific pattern. Here is the modified PHP code: <?php $data = $_ ...

phphtmlformsuploadsubmit

Guide on integrating React with Node.js and HTML

I've tried various methods, searched on Google, and checked the official site, but nothing seems to work. The code only functions properly when I include it in the HTML file of node.js like this: <!DOCTYPE html> <html lang="en"& ...

javascripthtmlnode.jsreactjsexpress

Modifying Copyright Feature in Footer

I am attempting to implement this function within my dark-colored footer: import Typography from '@material-ui/core/Typography'; function Copyright() { return ( <Typography variant="body2" color="textSecondary" align="center"> ...

javascripthtmlcssreactjsmaterial-ui

Tablet-friendly dropdown menu

Seeking advice on implementing @media queries for tablets with a width of 991px. Currently, the CSS file is optimized for mobile devices but needs adjustments for tablet responsiveness in the dropdown menu. I attempted the following CSS code: @media (max ...

htmlcsstwitter-bootstrapdrop-down-menunavbar

Having trouble sending the information to Parse.com using the website

I am a beginner with the Parse database and I am currently working on implementing a code that allows users to sign up, with their information stored in the Parse database. However, I am encountering an issue where the values are not uploading as expected. ...

javascriptjqueryhtmlcssparse-platform

The form embedded within the <tr> element seems to be malfunctioning

Hey there, I'm facing a little issue with my form that is nested inside a table content. It seems to not be working properly. Let me share the code snippet below: <table> <form name='editpo' method=POST action='js_buat_po.php? ...

htmlformshtml-table

Bracketing the Webpage: A Display of Unique Design

Currently, I am utilizing the Brackets code editor to create a webpage in HTML format. My aim is to transfer these files to another computer so that the user on that device can view the webpage created from these HTML files. Strangely, when I open the HTML ...

htmlcssadobe-brackets

Mastering the art of changing text color based on element class name in CSS3

Is it possible to dynamically set the text color of a list item based on the class name of its nested span element? For example, if the span has a class of "green", the text color of the parent li should also be green. How can this be achieved? Demo:https ...

css

Connecting CSS Style Sheet to JSP Page

I'm facing an issue with linking a CSS file located in my WEB-INF folder to a JSP page. In the JSP page, I have specified the location of the CSS file as follows: <link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/WEB- ...

javahtmlcssjsp

What causes Punjabi (Indian Language) to display as boxes on certain smart devices?

I recently launched a mobile application named Gurbani Ujagar. While the app functions perfectly on devices like the Samsung Galaxy S3, it seems to display improperly on other phones such as the Galaxy Nexus, Galaxy S, and certain tablets, showing words or ...

androidhtmlxcodefonts

Looking to replicate a Modal that I designed, but unsure which elements need altering in order to achieve this. I am hoping to create three duplicates of the Modal

This modal is functioning perfectly, and now I want to replicate the same modal three times on a single page. I require three distinct buttons on the same page to trigger these separate modals. At this point, I am unsure which attributes need modification ...

javascripthtmljquerycssmodal-dialog

Ways to ensure that the height of the second row in the second column matches that of the first column

My current layout design is causing an issue where the lower green box extends beyond the total height of the entire box. I've provided a rough version of my code on codepen. Using the Bulma framework, my goal is to align the height of the left column ...

javascripthtmlcssbulma

Sorting through a table based on the name of the element

I am currently working on filtering an HTML table using a search form. It's working great, but I'm facing an issue where the filtered elements are trying to fill the entire width of the table instead of maintaining their original width (which is ...

javascripthtmlcssfilterwidth

Tips for ensuring an animation is triggered only after Angular has fully initialized

Within this demonstration, the use of the dashOffset property initiates the animation for the dash-offset. For instance, upon entering a new percentage in the input field, the animation is activated. The code responsible for updating the dashOffset state ...

javascriptcssangulartypescriptangular-animations

Effortlessly Transform HTML into Plain Text Using jQuery

If I wanted to create a feature on my website where users can input text into a text area and then convert it to HTML by clicking a button, how could I achieve that? I'm looking for functionality similar to what Wordpress offers, where users can enter ...

jqueryhtmltextconverters

How can I turn off Angular Grid's virtualization feature, where Angular generates div elements for the grid based on height and width positions?

Currently, I am working with an Angular grid (ag-grid) that dynamically creates div elements in the DOM to display data as the user scrolls or views different sections. As part of my testing process using Selenium WebDriver, I need to retrieve this data fr ...

javascriptcssangularjsseleniumag-grid