How to create a captivating image effect using CSS on hover

I am attempting to create an animated image on hover. The desired outcome is similar to the one showcased here: Check it out (scroll to view the image "Our Team")

Essentially, I want a background where I can showcase information such as names and links just like in the referenced theme, but I'm struggling to achieve it.

Here's my current code:

<div class="row">
  <div class="col-md-6">        
    <div class="picture">
      <div class="photoapropos center-block">
        <div class="info">
          <img class="img-responsive img-circle" alt="Name" src="<?= $url; ?>"/>
          <p>Name</p>
        </div>
      </div>    
    </div>  
  </div>
</div>

Additionally, here's my CSS styling:

.picture {
  display: block;
  opacity: 1;
}
.photoapropos{
  display: block;
  position: relative;
  width: 425px;
  height: 425px;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.photoapropos:hover .info {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.photoapropos .info {
  position: absolute;
  background: #FF8C00;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-backface-visibility: hidden;
}

If anyone could offer assistance, that would be greatly appreciated. This particular feature seemed straightforward to implement, so I'm unsure of what I might be overlooking?

Thank you for any guidance provided.

htmlcss

Answer №1

    .picture {

        display: block;
        opacity: 1;
        background:url('http://themes.startbootstrap.com/spectrum-v1.2.0/assets/img/demo-portraits/portrait-4.jpg');
        border-radius: 50%;
        height: 425px;
        width: 425px;
    }

    .photoapropos{
        display: block;
        position: relative;
        width: 425px;
        height: 425px;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;

    }

    .photoapropos:hover .info{


        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }

    .photoapropos .info {
        position: absolute;
        /*background: #FF8C00;*/
        width: inherit;
        height: inherit;
        border-radius: 50%;
        opacity: 0;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        -o-transform: scale(0);
        -ms-transform: scale(0);
        transform: scale(0);
        -webkit-backface-visibility: hidden;
        text-align: center;

        background: rgba(82, 219, 235, 0.8);
        color: #fff;
    }

    .photoapropos .info p {
        margin-top: 50px;
    }
<div class="row">
    <div class="col-md-6">
        <a class="picture" href="<?= $url; ?>">
            <div class="photoapropos center-block">
                <div class="info">
                    <p>Name</p>
                </div>
            </div>
        </a>
    </div>
</div>

Answer №2

To become skilled at replicating code is a valuable skill. Chuckles!

Feel free to modify classes and other elements. It's good practice to acknowledge the source as well.

The visual effect is achieved through CSS scale.

.item {
         width: 225px;
         height: 225px;
         margin: 15px auto;
         border-radius: 50%;
         position: relative;
         cursor: default;
         box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
         -webkit-transition: all 0.4s ease-in-out;
         -moz-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
         -ms-transition: all 0.4s ease-in-out;
         transition: all 0.4s ease-in-out;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         background-size: cover;
         -o-background-size: cover;
       }
       
       .item .info {
         position: absolute;
         background: rgba(82, 219, 235, 0.8);
         width: inherit;
         height: inherit;
         border-radius: 50%;
         opacity: 1;
         -webkit-transition: all 0.4s ease-in-out;
         -moz-transition: all 0.4s ease-in-out;
         -o-transition: all 0.4s ease-in-out;
         -ms-transition: all 0.4s ease-in-out;
         transition: all 0.4s ease-in-out;
         -webkit-transform: scale(0);
         -moz-transform: scale(0);
         -o-transform: scale(0);
         -ms-transform: scale(0);
         transform: scale(0);
         -webkit-backface-visibility: hidden;
       }
       
       .about-img-1 {
         background-image: url(https://www.gravatar.com/avatar/f44f4e56cd6b6a152f0dcfc8412b7069?s=328&d=identicon&r=PG);
       }
       
       .visible-xs {
         display: none!important;
       }
       
       .img-circle {
         border-radius: 50%;
       }
       
       .item .info h3 {
         color: #f4f5f7;
         font-size: 24px;
         margin: 0 30px;
         padding: 45px 0 0 0;
         height: 120px;
       }
       
       .item .info p {
         color: #f4f5f7;
         color: rgba(244, 245, 247, 0.8);
         padding: 10px 5px;
         font-style: italic;
         margin: 0 30px;
         font-size: 14px;
         border-top: 1px solid rgba(244, 245, 247, 0.5);
         opacity: 0;
         -webkit-transition: all 0.4s ease-in-out 0.4s;
         -moz-transition: all 0.4s ease-in-out 0.4s;
         -o-transition: all 0.4s ease-in-out 0.4s;
         -ms-transition: all 0.4s ease-in-out 0.4s;
         transition: all 0.4s ease-in-out 0.4s;
       }
       
       .item .info .list-inline {
         font-size: 18px;
       }
       
       .item .info ul {
         opacity: 0;
         -webkit-transition: all 0.4s ease-in-out 0.4s;
         -moz-transition: all 0.4s ease-in-out 0.4s;
         -o-transition: all 0.4s ease-in-out 0.4s;
         -ms-transition: all 0.4s ease-in-out 0.4s;
         transition: all 0.4s ease-in-out 0.4s;
       }
       
       .list-inline {
         padding-left: 0;
         margin-left: -5px;
         list-style: none;
       }
       
       .item:hover {
         box-shadow: none;
       }
       
       .item:hover .info {
         -webkit-transform: scale(1);
         -moz-transform: scale(1);
         -o-transform: scale(1);
         -ms-transform: scale(1);
         transform: scale(1);
         opacity: 1;
       }
.item:hover .info ul {
    opacity: 1;
}
<div class="item about-img-1">
  <div class="info">
    <!-- Mobile Fallback Image -->
    <img class="img-responsive img-circle visible-xs" src="https://www.gravatar.com/avatar/f44f4e56cd6b6a152f0dcfc8412b7069?s=328&d=identicon&r=PG" alt="">
    <!-- Name / Position / Social Links -->
    <h3>Kalpesh Singh</h3>
    <p>KnowKalpesh.in</p>
    <ul class="list-inline">
      <li><a class="light-text" href="#"><i class="fa fa-facebook fa-fw"></i></a>
      </li>
      <li><a class="light-text" href="#"><i class="fa fa-linkedin fa-fw"></i></a>
      </li>
      <li><a class="light-text" href="#"><i class="fa fa-twitter fa-fw"></i></a>
      </li>
    </ul>
  </div>
</div>

Answer №3

The hover effect on this section is achieved using the CSS properties box-shadow and scale with transitions.

Below is the rendered result with the code snippet for the website example along with the corresponding CSS styles:

.item {
    width: 225px;
    height: 225px;
    margin: 15px auto;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}
 .item {
    margin: 30px;
}
.about-img-1 {
    background-image: url(http://themes.startbootstrap.com/spectrum-v1.2.0/assets/img/demo-portraits/portrait-1.jpg);
}
.img-circle {
    border-radius: 50%;
}
.item>a>img, .item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
}
img {
    -webkit-backface-visibility: hidden;
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

.item .info h3 {
    color: #f4f5f7;
    font-size: 24px;
    margin: 0 30px;
    padding: 45px 0 0 0;
    height: 120px;
}
.item .info {
    position: absolute;
    background: rgba(82, 219, 235, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-backface-visibility: hidden;
}

.item:hover .info {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}
.item:hover {
    box-shadow: none;
}

Fiddle

Answer №4

Check out this solution in Fiddle: https://jsfiddle.net/uhdtv3nv/

.wrapper {
  width: 100%;
  height: 100%;
  background-color: blue;
}

.item {
   width: 225px;
    height: 225px;
    margin: 15px auto;
    border-radius: 50%;
    position: relative;
    cursor: default;
    box-shadow: inset 0 0 0 15px rgba(244, 245, 247, 0.5);
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    background-image: url('http://iconshow.me/media/images/ui/ios7-icons/png/512/person_1.png');
}

.item:hover {
  box-shadow: none;
}

.item:hover .info {
  -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
}

.info {
      position: absolute;
    background: rgba(82, 219, 235, 0.8);
    width: inherit;
    height: inherit;
    border-radius: 50%;
    opacity: 0;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-backface-visibility: hidden;
}

.item h3 {
  padding: 80px 70px;
}
<div class="wrapper">
  <div class="item about-img-1>
    <div class="info<
      <h3>Some text</h3>
    </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

Modifying text input in Angular

I am working on an Angular form that includes a text input which I would like to be able to edit by clicking on the edit button. Within the form, there are 3 buttons available: edit, cancel (which discards changes), and save (which saves changes). When t ...

htmlangularangular-materialangular11

Reacting to a situation where the tailwind grid has an issue: the responsive column span is visible in the HTML, but

I'm having an issue with a grid that is not behaving as expected. I have set up a jsfiddle to show the behavior I am looking for, which relies on the responsive code: col-span-3 md:col-span-2 for one of the items. The problem arises when I inspect th ...

htmlcssreactjstailwind-csscss-grid

What could be causing my HTML element to vanish once the animation is complete?

I have successfully implemented an animation on 3 HTML elements for a landing page I am currently developing. The animations are working as intended, but I am facing an issue where the two lower elements (an h1 tag and a button) briefly appear on the page ...

htmlnext.jstailwind-csscss-animations

How to use CSS to align a link vertically next to an image

UPDATE: Apologies for the duplicate post, I am still learning the ropes of CSS. However, I would appreciate it if someone could shed light on why aligning the image is preferable to aligning the link or text. Is there a broader concept in play here that ...

csshtmllayout

PHP implementation of a webpage supporting multiple languages

I encountered an issue while creating a multi-lingual page successfully. I utilized CssFlipper to generate the RTL Bootstrap file and everything was functioning perfectly, except for the fact that when I switch the language to Arabic, the slider on the pag ...

phphtmlcsstwitter-bootstrapbootstrap-4

Using Selenium to choose an element based on the text of its sibling element

I've been working on a selenium script for: My goal is to select the "Add to Compare" element for "Sony Xperia," but it's not being located. I've tried using both cssSelector and xpath, but I can't seem to figure out what I'm doin ...

jquerycssseleniumtestingxpath

The feature of Google street view is not supported within the tabs on WordPress

I'm experiencing some issues with displaying Google maps and street view using the Wp Google Map WordPress plugin within tabs. The map displays perfectly on the first tab where I placed the short code for the map, but on the second tab where I placed ...

javascriptcsswordpressgoogle-mapsgoogle-maps-api-3

There are various IDs in the output and I only require one specific ID

I have a JSON fetcher that is functioning properly. However, whenever I request an ID, it returns all the IDs present in the JSON data. Is there a way to retrieve only the latest ID? This is my first time working with JSON so I am still learning. $(docu ...

javascripthtmljsonfetch

Struggling with Dreamweaver template and library issues

As I revamp a website, Dreamweaver templates and libraries are my go-to tools for maintaining a consistent design across all pages. Almost done with the redesign, I'm now seeking feedback from colleagues. To achieve this, I attempted to copy the site ...

htmlcssdreamweaver

What is the best way to enable flex-items to expand without changing their original size?

Using Flexbox can really enhance the design capabilities of a web designer. However, figuring out exactly how to achieve certain layouts can sometimes be tricky. For instance, consider this plunk. I want the items to expand within each row without stretchi ...

cssflexbox

Can anyone provide guidance on locating the parent of a pseudo element with Selenium WebDriver?

Is there a way to retrieve the parent web element of a pseudo element (if we can call it the parent) using JavaScript? I know that Selenium's methods for searching for web elements are not suitable for pseudo elements, but JavaScript does allow manipu ...

javascriptcssselenium

Select any menu option to return to the one-page layout and then scroll down to find the location

I'm wondering if there is a way to navigate back from an external page to a specific section on my one-page website with a fixed menu? On my one-pager website, I have a fixed menu that includes a "apply for a job" button. When clicked, it takes users ...

javascripthtmlcss

What is the best way to use CSS to ensure that dynamic, data-driven characters can be properly displayed within a div

I'm in the process of updating a data-centric website that relies on information from an automated database engine. In the HTML, there's a fixed-size button containing text pulled from the database. I'm looking to incorporate some CSS styles ...

javascriptjqueryhtmlcss

Simple JavaScript numeric input field

Hey there, I'm a beginner learning JavaScript. I'm currently working on creating a program that adds numbers input through text fields. If you want to check out the HTML code, visit this link on JS Fiddle: http://jsfiddle.net/fCXMt/ My questio ...

javascripthtmlcssmathaddition

Unresponsive Webpage

I am currently managing Facebook Ads for a client, but I have encountered an issue with their website not being responsive on mobile devices. While I have some knowledge of basic HTML & CSS, I am uncertain about how to address this particular problem. The ...

htmlcss

Struggling to toggle the visibility of a table with a button - successfully hiding it, but unable to make it reappear?

I need a button that can toggle (show/hide) a table. Currently, my code hides the table successfully, but it fails to show the table again when I click the button. It seems like there is an issue with refreshing or redirecting after clicking the button for ...

javascripthtmlcss

Compiling SCSS to CSS in Vue.js is a breeze

I am working on a vue js project that includes scss files. My goal is to compile these scss files into css and store them in the public folder. How can I achieve this? Should I make changes to the vue.config.js file? const path = require('path'); ...

cssvue.jssass

Creating a stationary menu on the header that overlaps both the header and content on mobile browsers

I'm currently in the process of developing a website, but I've hit a snag that I can't seem to figure out. You can view the website at . I'm focusing on mobile-first design, so for the best view, try shrinking the browser screen. When ...

htmlcsshidez-index

Tips for enhancing the clarity of elements in KineticJS

I'm new to using Kinetic JS, and while I think it's a great library, I'm having trouble with the resolution of the elements. I know that Kinetic JS doesn't use SVG, but the resolution is not up to par. I'm creating circles and othe ...

javascripthtmlcsscanvaskineticjs

Steps to insert a style tag into the head using an AngularJS directive

Greetings! Users have the option to choose between printing reports in landscape or portrait format. I am interested in finding out if it is feasible to incorporate the following code snippet into the header of a web document using an AngularJS directive. ...

angularjscssangularjs-directiveangularjs-service