Change the size and roundness of elements

Attempting to implement a hover effect on an image, I've encountered an issue.

It seems to work fine in Firefox:

https://i.sstatic.net/J5LZf.png

However, in Chrome, there appears to be a problem:

https://i.sstatic.net/99sdN.png

Below is the code I am using:

<div class="photo">
   <img src="images/photo.jpg" alt="">
</div>



.photo {
   width: 200px;
   height: 200px;
   border: 10px solid $white-color;
   overflow: hidden;
   position: absolute;
   bottom: -50px;
   left: calc(50% - 110px);
   @include border-radius(50%);

   img {
     max-width: 100%;
     height: auto;
     @include scale(1);
     @include transition(.3s ease-in-out);

     &:hover {
       @include scale(1.2);
     }
   }
}

Answer №1

To optimize for Chrome, remember to include prefixes. Specifically, use -webkit-transform: scale();

Don't forget to also add it to the transition property.

For more information on CSS vendor prefixes, check out this helpful list: List of CSS vendor prefixes?

Answer №2

    <style>
        .picture{
            width: 250px;
            height: 250px;
            border: 8px solid #fff;
            overflow: hidden;
            position: absolute;
            border-radius: 50%;
        }

        .picture img {
            max-width: 100%;
            height: auto;
            transition: scale(0.3s ease-in-out);
        }

        .picture img:hover {
            transform: scale(1.2);
         }


    </style>

<div class="picture">
    <img src="images/picture.jpg" alt="">
</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

Could a Docker networking problem be causing a WebDriverException to be thrown when calling Selenium webdriver.Chrome() from a Docker container?

Currently using selenium=4.12.0. When I try to import from selenium import webdriver and then attempt to download the chrome driver with: webdriver.Chrome() The following error occurs: File "/usr/local/lib/python3.9/site-packages/selenium/webdriver/c ...

Loop a background image around a header that is centered in the design

I'm having an issue with creating a header with fixed dimensions and aligning it center on my webpage. I want to have small 1 px images repeat along the remaining width of the header from each edge of the main image. However, when I try to repeat the ...

Arrange the child divs on top of the parent div

<div id="1"> <div id="2"> </div> </div> It is proving challenging to position div2 above div1 in the vertical dimension. Applying a negative top position does not have the desired effect, as it appears that the top border of the ...

React JS issue with SVG linearGradient not displaying accurate values

Within my component, I am working with SVG paths and a linearGradient value passed down from the parent component through static data. The properties 'startColor' and 'stopColor' are used to define the gradient colors for each element. ...

Trouble concealing tab using slideUp function in Jquery

Whenever I click on the 'a' tag, it displays additional HTML content (list) that is controlled by generic JS code for tabs. However, I want to hide the list when I click on the "Title" link again. What can I do to achieve this? You can view a de ...

Customize stroke widths for each individual SVG item

I'm facing an issue with applying consistent stroke width to my CSS on a webpage. Here is the code snippet I am using: path { fill: none; stroke-width: 10pt; stroke: red; } Despite this, the rendering appears differently on certain SVGs. You c ...

Enhancing transparency with a touch of background color

After successfully exporting my chart created in canvas as an image file, I noticed that the image turned out to be transparent without any background. Is there a way through code to add a background color to this existing image obtained from canvas? For ...

Angular 8 allows for the creation of custom checkboxes with unique content contained within the checkbox itself, enabling multiple selection

I'm in need of a custom checkbox with content inside that allows for multiple selections, similar to the example below: https://i.sstatic.net/CbNXv.png <div class="row"> <div class="form-group"> <input type ...

Getting tags with text containing specific substring by utilizing CSS selectors

Here is the HTML snippet I am working with: <tr bgcolor="#DEDEDE"> <td> <b>OK:Have idea</b> </td> <td> <b>KO:Write code</b> </td> <td> <b>KO:Ru ...

The table's pagination displays above, thanks to Tailwindcss

I'm facing an issue where the pagination is showing up above the table, but I was expecting it to be displayed after the table. It would be ideal if the pagination appeared right after the table when adding multiple rows. Check this link for more inf ...

Arrangement of box and buttons on R shiny interface

My dashboard page features action buttons aligned to the left, along with a plot and two additional zoom and reset buttons. I am looking to center the box on the screen and position the zoom and reset buttons at the top right corner. I attempted to use t ...

Struggling to implement CSS variables across different browsers

I'm struggling to make CSS variables function properly, here is what I have so far: :root { --primary-color: #ffcd600; --spacing: 10px; --blur: 10px; } img { padding: var(--spacing); background: var(--primary-color); } When I check the el ...

Creating a unique dimming effect for modals in a React application

Could someone assist me in adding opacity or dimming the background while a modal is open using the code provided? You can view the working example here. ...

JavaScript and modifying the attributes of the nth child

I'm working on a navigation bar that changes the "background-image" of menu items using the nth-of-type CSS selector. Now, I need to figure out how to dynamically change the picture of the "background-image" when hovering over a specific menu item usi ...

Manage image placement using CSS object-position

I have the following code snippet: img{ width: 100%; height: 1000px; object-fit: cover; object-position: left; } <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

Experiencing problems with web page layout when using bootstrap on IE8?

Here is a code snippet that functions correctly in IE9 and later versions, but encounters issues in IE8: <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6" id="div1"> <div class="panel panel-default" style="" id="panel1"> ...

When I open my website in the browser, the bootstrap card-deck design is not being displayed correctly

I encountered a strange issue while designing my website. The code I wrote for the Bootstrap card-deck class in codeply.com was working perfectly fine. However, when I copied the same code into my PyCharm code editor and then pasted the file link into my b ...

Could you advise on the best placement for my upcoming JQuery animation?

Here is the code I am currently working with: $(function() { $("button").click(function() { $("#box1").animate({ left: $(window).width() - 800 }, { complete: function() { $("#box1").hide(); } }); $("#box2").a ...

Animation of lava effect in Angular 7

I have a unique Angular 7 application featuring a homepage with a prominent colored block at the top, along with a header and various images. My goal is to incorporate lava effect animations into the background similar to this CodePen example. If the link ...

Struggling with the installation of SimpLESS

I encountered an issue while attempting to install SimpLESS on my Windows 7 64bit PC. Upon running the installer, I was met with an error message stating: "Could not query info: Invalid HTTP Status Code (403)". Despite my efforts to search for a solution o ...