Using HTML5 and CSS transitions to scale an image within a 960 grid layout

Having some trouble achieving a smooth transition for the height and width of images on my webpage. I believe if you take a look at my page, not much explanation is needed:

Click here to see the image transition

The goal is to enlarge the image to double its size for better viewing. However, due to it being within a 960 grid layout, the appearance is not quite right.

Give this a try: click on the Chip Kidd and David Carson images to see the issue.

When hovering over Chip Kidd, it's not too bad, but when it enlarges, it appears behind the David Carson image instead of on top.

David Carson seems okay since there are no other images to the right, but instead of growing towards the left, it expands to the right and outside the grid.

Any suggestions for fixing the issue with the image enlargement so that they appear pleasingly (avoid hiding behind other images, staying within the size of the 12 grid container rather than exceeding the margins like the David Carson image)?

htmlcsscss-transitions

Answer №1

Consider utilizing a css transformation (scale) instead of simply adjusting the width and height properties.

Update: You may want to revise your hover style with the following code (remember to include browser prefixes).

.zinepages img:hover {
    position: relative;
    z-index: 100;
    -webkit-transform: scale(2);
    transition: all 2s;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

I included a relative positioning and z-index to ensure it remains above other elements. Additionally, I added a box-shadow for a more visually appealing effect, but you can choose whether to keep it or not.

Update 2: Upon further inspection, if you want to prevent overflow within the grid, you can achieve this using transform-origin. Assign classes to left-aligned and right-aligned images, then set transform-origin: left top; or transform-origin: right-top;, respectively. Once again, vendor prefixes are omitted here.

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

jQuery Slider not appearing on the page

I am attempting to incorporate the Basic jQuery Slider into my website. Below is the code I have used: For HTML file: <div id="slides"> <ul class="bjqs"> <li><a href="somelink"><img src="someim ...

javascriptjqueryhtmlcss

Having trouble with PHPmailer resulting in a 504 gateway timeout error

I keep receiving a 504 gateway timeout error from my server when using phpmyadmin to individually send emails to a list of approximately 1200 users. It is crucial for me that the emails are sent out one by one, as I want to avoid exposing any email addres ...

phphtmlphpmailer

Prevent global CSS from affecting VueJS by enabling only scoped CSS within components

Is there a way to eliminate all global CSS within a VueJS component and only allow scoped CSS? If so, how can this be achieved? Below is the issue I am trying to address: * { /* Global styles */ } /* Component-specific styles */ .items ul { } .i ...

cssvue.js

Enable CDATA support in ActionView::Base.full_sanitizer

One method I found helpful was using the ActionView::Base.full_sanitizer.sanitize(value) to remove HTML content. It generally works well, but there is an issue when the value passed into the method is wrapped in <![CDATA[ and ]]> because it returns a ...

htmlruby-on-railsrubycdata

Creating a form in PHP/HTML with a variety of selectable options

Here is my PHP and HTML code: $damt2 = isset($_POST['damt2']) ? $_POST['damt2'] : 200; $dateinfo2 = json_decode(file_get_contents($_SESSION['base_path'] . 'dl.dict'), true); arsort($dateinfo2); // Sort an array in r ...

phphtml

Is it recommended to continue using vendor prefixes for border-radius property?

When coding, I currently utilize the following: -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; After running tests, it seems that there was no noticeable difference in modern browsers (Chrome 33+, Opera 25+, Safari 8+). Internet ...

cssvendor-prefix

Customizing skin CSS for DNN Portal and Page images

Currently, I have a unique custom skin that I personally created. It is implemented on multiple portals that I am responsible for managing. My goal is to incorporate the ability for the header image to change based on the specific page being viewed. The he ...

cssdotnetnukedotnetnuke-7

Access a designated div within an iframe following the submission of a form

I wanted to discuss my current setup... Currently, I have two pages in the project - index.html and cart.html. The issue arises when a form on index.html is submitted because it loads cart.html into a pop-up iframe. In this case, the entire cart.html page ...

jqueryformsiframehtml

Make sure to consistently show the rating bubble within the md-slider

I am currently exploring the functionality of md-slider in its md-discrete mode. However, I would like to have the slider bubble always visible on the screen, similar to this: I do not want the slider bubble to disappear when clicking elsewhere. Is there ...

angularjscssangular-material

Tips for preventing errors in formatting?

I created a field using rectangles as divs. However, when I add content to the rectangle divs, the formatting gets messed up. Can anyone help me fix this issue? Here's the link <div class='line' id='line1'> <div class=& ...

htmlcss

Accessing web authentication through VBA

Having some difficulties trying to access my webtext account through VBA. The first hurdle I faced was identifying the tags for the username and password input boxes. After using inspect elements, it seems like the tags are "username" and "password." Howe ...

htmlcssexcelvba

Creating a React.js component and setting an initial value within it

Recently delved into the world of React.js and currently attempting to create a reusable header that can switch between two states: one for when the user is logged in, and another for when the user is not logged in. // Header.js var Header = React.createC ...

javascripthtmlreactjs

The HTML generated by Angular does not display as anticipated

When converting the angular-generated HTML to a PDF using jspdf, it does not take into consideration angular classes like ng-hide. This means that elements styled with the ng-hide class will still appear in the generated PDF. To see an example, visit the ...

htmlangularjspdfmarkupjspdf

Tips for adding an image to a single product page without including it in the related products section

I have a WooCommerce website and I successfully inserted an image element on a single product page using a conditional tag. However, the same image is also appearing in related products near the website footer in a loop. I do not want these extra images to ...

phphtmlwordpresswoocommerce

CSS clearfix doesn't appear to be functioning properly

I've been experimenting with using clearfix instead of the clear both property, but it's not working as expected. Despite following tutorials, the issue persists. How can I troubleshoot this and make it function properly? * { marg ...

cssclearfix

Any tips on animating my SVG when I hover my mouse over it with CSS or JavaScript?

Having trouble getting the gray outline to fill when hovering over it. The method I'm currently using isn't working on any browser. Any suggestions? You can find the HTML with the inline SVG file below: CSS is in a separate file, containing cla ...

htmlcssanimationsvg

Navigate to the element and retrieve a null offset

Currently, I am attempting to retrieve an element's ID from a select box and then scroll to that specific element using the following code snippet: // move to services $(function () { $("select.jump").change(function() { var selected = $( ...

jqueryhtml

Modify the background color of four results with the help of PHP

With php, I am looking to dynamically change the background color of a td based on the number within it. While this can be achieved using CSS by assigning different classes to each td with specific colors, I prefer a more straightforward method for mainten ...

phpcssbackground-color

designing a button with eye-catching CSS3 styles

Although I struggle with CSS, I managed to create a button that looks pretty good. However, it doesn't have the same shine as the buttons on Yahoo Mail or the buttons found at Check out my demo on Fiddle: http://jsfiddle.net/karimkhan/y6XGg/ I wou ...

css

Load Image Timing Discrepancy in Web Development (jQuery/PHP/HTML)

I am currently using jQuery to develop a basic slideshow feature. Within my home.php file, I have created a slideshow. Additionally, there is a menubar that allows users to navigate to different pages. Upon clicking on "Home" in the menu, the home.php con ...

phpjqueryhtmlajax