Is there a way to expand my image width-wise without affecting its height upon hover?

.film{
    text-align: center;
    width: 234px;
    min-height: 311px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.poster{
    width: 234px;
    height: 311px;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    display: block;
}
.poster:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.film_name{
    font-size: 24px;
    word-wrap: break-word;
    font-family: 'Roboto', 'Arial', 'Tahoma', sans-serif;
    font-weight: 700;
}
.year{
    color: #00dfff;
}
<div class="film">
    <a href="#" target="_blank">
        <img class="poster" src="https://st.kp.yandex.net/images/poster/sm_3362295.jpg" alt="Годзилла 2: Король монстров">
        <div class="triangle">
            <span class="triangle__line"></span>
            <span class="triangle__line"></span>
            <span class="triangle__line"></span>
        </div>
        <div class="film_name">Годзилла 2: Король монстров</div>
        <div class="year">2019</div>
    </div>
    </a>
</div>

How do I expand the image vertically?

The minimum height property of ".film" does not need to be adjusted.

htmlcsscss-transforms

Answer №1

Make a simple adjustment by changing overflow: hidden; to overflow: visible; within the film class. Check out the snippet below:

.film {
    text-align: center;
    width: 234px;
    min-height: 311px;
    position: relative;
    z-index: 1;
    overflow: visible;
}

Answer №2

Add a div (poster-panel) to the image tag and set overflow:hidden so that the image will stretch inside the poster-panel div.

.film{
    text-align: center;
    width: 234px;
    min-height: 311px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.poster-panel{
overflow: hidden;
}
.poster{
    width: 234px;
    height: 311px;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    display: block;
}
.poster:hover{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.film_name{
    font-size: 24px;
    word-wrap: break-word;
    font-family: 'Roboto', 'Arial', 'Tahoma', sans-serif;
    font-weight: 700;
}
.year{
    color: #00dfff;
}
<div class="film">
    <a href="#" target="_blank">
    <div class="poster-panel">
        <img class="poster" src="https://st.kp.yandex.net/images/poster/sm_3362295.jpg" alt="Годзилла 2: Король монстров">
    </div>    
        <div class="triangle">
            <span class="triangle__line"></span>
            <span class="triangle__line"></span>
            <span class="triangle__line"></span>
        </div>
        <div class="film_name">Годзилла 2: Король монстров</div>
        <div class="year">2019</div>
    </div>
    </a>
</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

Is there a workaround using jQuery to enable CSS3 functionality across all browsers?

Is there a way in jQuery to make all browsers act as if they have CSS3 capabilities? ...

javascriptjquerycss

Unraveling a collection of HTML tags using Python's Beautiful Soup library

Need help parsing HTML code using Python Beautiful Soup. Trying to extract images along with their width and height properties, if available. The following code snippet indicates there are three images on a page: the first image is 300x300, the second has ...

pythonhtmlbeautifulsoup

Angular service unable to maintain data continuity across multiple controllers

I am facing an issue while attempting to set the title in controller1 using a service and then accessing the updated title in controller2. The function sharedProperties.setTitle(title) works perfectly fine in controller1, however, in controller2, I keep g ...

htmlangularjsangularjs-scopeangular-services

Exploring the wonders of CSS with Socialchef

Hey, I recently came across a solution on Stack Overflow where they provided code for SocialChef to convert decimal inputs into fractions. I'm wondering how I can write or incorporate some code to input fractions and mantissa as a fraction... I ...

phpcss

Using a PHP switch case statement with an HTML multiple select dropdown

I am facing an issue with my HTML multiple select box: <option value="1">First choice</option> <option value="2">Second choice</option> <option value="3">Third choice</option> Using jQuery, ...

javascriptphpjqueryhtml

Can someone explain how to implement document.querySelector in TypeScript within the Angular framework?

I am tackling the task of creating a login/register form that allows users to switch between the two forms with the click of a button. The goal is to only display one form at a time. Initially, I implemented this functionality in a basic HTML file and it w ...

htmlangulartypescriptbootstrap-5

How can I use CSS to make a child element in a grid layout stretch horizontally to full width?

I am currently working on designing a grid layout that will display a child element when clicked. Here is what I have in mind: [ link1 ] [ link2 ] [ link3 ] [ link4 ] [ link4 ] [ link4 ] When clicked, it will turn into: [ link1 ] [ link2 ] ...

cssflexboxcss-grid

Issues have arisen in IE8 with the background gradient on hover elements in the menu, while it functions properly in all other web browsers

Welcome to the website: I've recently taken on a project involving the gradiated menu on this site. The menu works flawlessly in Firefox, Chrome, and Safari - the hover effect changes the background color to a light gradiated green. However, when it ...

internet-explorercss

Minimize all the open child windows from the main Parent window

I would like to implement a functionality where, upon logging in, the user is directed to a Main Page that opens in a new window. This Main Page contains two buttons, each of which will open a specific report associated with it in a new window when clicked ...

javascripthtmllogoutwindow.openwindow.opener

What technology does Spotify use to ensure that its music streaming service is not easily downloadable?

As I work on a website that will showcase some music tracks, I am aware that downloading music streams can be done through various tools like Chrome's Developer Tools or Firebug. Soundcloud is one such platform where this method of downloading streams ...

htmlstreaminghtml5-audiospotify

Divide the child elements into two separate divs evenly

I have a block of HTML code containing <li> elements like the following: <li>one</li> <li>two</li> <li>era</li> <li>jeu</li> <li>iuu</li> <li>iij</li> <li>emu</li> & ...

javascriptjqueryhtml

Adjust the parent element's height based on the child element's height, taking into consideration their respective positions

Is there a way to adjust the height of the parent element that has a relative position based on the height of child elements with absolute position? In the example below, the height of the .parent element is displaying as 0px Note: I am looking for a so ...

htmlcss

Utilizing Next.js - Implementation of a unique useThemeMode hook to efficiently manage theme preferences stored in the browser's localStorage, seamlessly integrating with toggleTheme

For a while now, I've been trying to figure out how to toggle my favicon based on the theme logic of my application and the current theme state stored in localStorage. My approach involves using CSS variables and data attributes applied to the html bo ...

javascriptcssreact-hooksnext.jsstyled-components

Stylish Card Design

Below is the CSS code: *{margin:0; padding:0; box-sizing:border-box; } img{ display:block; max-width:100%; height:auto; } html{ scroll-behavior:smooth; } body{ min-height:100vh; font-family:fantasy; font-size:1.12 ...

javahtmlcssflexboxcss-selectors

Automating the process of disabling a function on Internet Explorer

As I work on a new Internet Explorer plug-in, I've come across a frustrating feature that has been present since at least IE7. This feature allows users to modify the sizing of HTML elements in editable windows, like rich text emails in GMail, by simp ...

c#.nethtmlinternet-explorercoding-style

Line divider immediately following the title on the same row

I am looking to insert a separator line immediately following the H1 tag, however my attempts have been unsuccessful. Can someone provide assistance with this? <style> #sepr { border-top-width: 3 px; border-top-style: solid; ...

htmlcss

CSS Positioning: the container is not the right size for its content dimensions

Code Snippet: <div content> <div post> <div post> ... </div> Styling: .post { margin: 0; padding: 110px 20px 20px; float: left; width: 560px; position: relative; display: block; } #content { display ...

csspositioncontainers

"Efficiently handle multiple instances of the same name using AJAX, JavaScript

I have a PHP-generated multiple form with HTML inputs containing IDs and NAMEs. I am struggling to capture all this information. When I click the "Done" button, everything is marked as completed due to the button names. <?$command = "SELECT * FROM exam ...

javascriptphpjqueryhtmlajax

In order to enhance user experience, I would like the tabs of the dropdown in the below example to be activated by

function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } ...

javascripthtmlcss

Is it possible to resize a div based on the width of the window?

Imagine a scenario where it's not possible to change the content of a div, but only its shape and size by using transform: scale(1.4) for instance. To better understand this concept, take a look at This Website and try resizing the window using brows ...

htmlcssreactjs