Looking for assistance with CSS | Implementing hover image with zoom effect

Currently, I have a page created using DIVI WordPress:

My issue arises when attempting to implement a zoom effect on images upon hovering, as the image exceeds its designated div area.

I attempted to utilize CSS code from this source: https://codepen.io/Remedy/pen/ZYJrpp

The CSS code I used that isn't functioning properly is displayed below:

.et_portfolio_image img {
    max-width: 100%;

   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   transition: all 0.3s;
}

.et_portfolio_image:hover img {
   -moz-transform: scale(1.1);
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
}

While utilizing Firefox browser, I inspected the element by right-clicking on the image to identify the assigned class. Despite trying various classes, the desired effect of zooming the background image without overlap and contained within the specified DIV hasn't been achieved.

Your guidance and suggestions would be greatly appreciated. Thank you!

Answer №1

To address the overflow caused by the zoom, you should ensure that any excess content is hidden.

All you have to do is include overflow:hidden within the .et_portfolio_image class and your issue will be resolved.

.et_portfolio_image, .et_shop_image {
    display: block;
    position: relative;
    overflow: hidden; }

Answer №2

To achieve the desired result, you need to include the following CSS code:

.custom_portfolio_item {
    display: block;
}

Answer №3

Include this particular style

.et_portfolio_image, .et_shop_image { display: block; }

Answer №4

Big thanks to everyone for your help, the code worked flawlessly! To contribute to this post, I implemented David's solution:

.et_portfolio_image, .et_shop_image {
    display: block;
    position: relative;
    overflow: hidden; }

I really appreciate it - my page is looking amazing now!

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

Adding multiple elements with varying content to a separate division

I am attempting to combine two div elements into a single div, but I'm encountering difficulties. Despite thoroughly examining my code, everything appears to be correct. Here's what I've tried so far. To assist me in achieving this, I am ut ...

The video on my site is refusing to play

I'm having an issue with a 2-second video that is not playing, yet when I tried a 10-second video it worked perfectly. Why is this happening? Could it be that HTML does not support videos that are shorter than 1-2 seconds? It seems like it's onl ...

Add a fresh column in the table that includes modified values from an existing column, affected by a multiplication factor provided through a text input

I'm currently working on a Laravel website where I have a pricing table sourced from a database. The Retail Price column in this table serves as the base for calculating and populating a Discount Price column using a multiplier specified in a text inp ...

Error: The property 'length' cannot be read from an undefined parent causing Uncaught TypeError

Hey there, take a look at this cool stuff http://jsfiddle.net/J9Tza/ <form class="validation"> <div> <input type="email" class="form-control" id="inputEmail" name="email" placeholder="Email" pattern=".{3,200}" title="3 to 200 characters" r ...

What is the reasoning behind utilizing the "&" selector in CSS?

.navigation { position: fixed; top: 0; bottom: 0; left: 0; transform: translateX(-100%); transition: translation: all ease 0.25s; &.expand { transform: translateX(0); } } JavaScript file: $(document).ready(func ...

The width of DIVs in Mac Safari exceeds that of other browsers

Encountering an issue that is specific to MAC Safari. Here's the code snippet: <div class="wrapper" style="max-width:1220px"> <div style="width:50%;display:inline-block">First</div> <div style="width:25%;display:inline-block"&g ...

Integrate a resizable sidebar on the webpage's right side that dynamically adjusts the layout

As I develop a Chrome Extension, my goal is to incorporate a sidebar into all webpages without overlapping the existing content. The sidebar should be placed beside the content, effectively reducing the width of the body of the webpage to the initial width ...

Troubleshooting material design CSS problem in AngularJS routing module

Attempting to incorporate material design with routing in angular js, but encountering issues with CSS design not working. Interestingly, when using bootstrap CSS, it functions properly. Check out the Plnker Demo here However, upon trying this approach, ...

Creating a carousel similar to the one on Skipperlimited's website can be achieved

I am working on a project and I would like to create a design similar to the one found at Specifically, I am interested in replicating the carousel of images and the rotating carousel within their logo. Can anyone provide guidance or suggestions on how to ...

Ensure that the child element maintains equal height and width measurements within a row that is distinct

Is there a way to arrange 4 items inside a flex container in a 2 X 2 grid layout while ensuring that they all have the same width and height? I've tried using flex-grow: 1;, but since the children are in different flex containers, they do not obey th ...

What is the best way to re-render a component immediately following an update in React?

As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code. const [color, setColor] = useState("black") const bubbleSort = async () => { const sleep = ms => ...

Ways to verify if a particular value is included in a list

I am faced with a situation where I need to display different content in HTML based on the presence of a specific value ("sign_change_global") in a JSON loaded from a server. I believe this issue can be resolved within HTML only, but I also wonder if there ...

Hide the navigation menu when a page link is selected

Within my Angular 8 application, a fixed navigation bar is positioned at the top of the screen. Upon hovering over a dropdown nav link, a menu will appear for the user to explore. However, when a user clicks on one of these menu links, Angular Routing is ...

Is there a simple and efficient method to transition the loading of a regular website to AJAX for the entire site?

Is it feasible to easily and quickly change all links on a website to load the URL that the user clicked via AJAX, rather than refreshing the webpage? My website currently has standard links, but in order to create a mobile application for iPhone, I need ...

React component rendering twice due to width awareness

In a React component that I've developed, I have utilized ResizeObserver to track its own width. Within this component, two divs are rendered with each having a "flex: 1" property to ensure equal width distribution. Under certain conditions, such as w ...

Transforming Plain Text to HTML Format

Currently, I am fetching some Strings from a database and successfully converting them to HTML using the following code: private string StripHTML(string source) { try { string result; // Code for stripping ...

Customize the select option in HTML to hide the default arrow and provide additional spacing for the options

I am dealing with a select option markup that looks like this <div class="styleselect"> <select onchange="setLocation(this.value)" class="selections"> <option selected="selected" value="position">Position</option> <opt ...

IE8 is not properly handling nested HTML elements that have the display:none property set

I am currently using jQuery to create a smooth fade-in effect for an <article> element that contains a <section> element. The outer element has CSS properties of display:none, position:fixed, and z-index:5. Meanwhile, the inner element is styl ...

Designing a login window that appears as a popup and blurs out the background page for enhanced security

I am in the process of developing a login/register page and I would like to implement a feature where, upon clicking the 'register now' button on the home page, a popup appears within the same website with a transparent and dull background. An ex ...

Pause page scrolling temporarily in JavaScript while allowing the scrollbar to continue scrolling until the pause is lifted

I'm currently working on achieving a similar effect to the one found on this website: . On that site, as you scroll down, the 'HELLO' text moves to the side. I've managed to do that part successfully, but I'm facing an obstacle reg ...