Question 44251 in Html Question posted in
Some basic documentation can be found here.

Remove zooming of a cover image while increasing width transition – Html

i am working on a transition when i hover i need to increase the image containeer width and fit the image , my transition goes from lest to right increasing width, while everything works the image kinda zoooms out and i have no idea hows that happening so would be glad if someone helps me , below is my html and css.

@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&family=Shantell+Sans:ital,wght@1,300&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
   
}
:root{

--small : url("https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg");
--image : url("https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg");
}
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
body::after{
    position:absolute; 
    width:0; 
    height:0; 
    overflow:hidden;
     z-index:-1; 
    content: var(--image)
 }
.container{
   
    white-space: nowrap;
    overflow-x: scroll;
    scrollbar-width: none;
    justify-content: flex-start;
    width: 600px;
}
.container::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
.item{
    display: inline-block;
    height: 160px;
    width: 130px;
  position: relative;
    transition: all 0.5s linear;
}
img{
  position: absolute;
    object-fit: cover;
    height: 100%;
    width: 100%;
    border-radius: 0.5rem;
    transition: opacity 0.5s linear;
}
img:nth-child(1){
    opacity: 1;
}
img:nth-child(2){
    opacity: 0;
}
.item:hover{
   width: 300px;
}
.item:hover img:nth-child(1){
    opacity: 0;
}
.item:hover img:nth-child(2){
    opacity: 1;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"
        integrity="sha512-pumBsjNRGGqkPzKHndZMaAG+bir374sORyzM3uulLV14lN5LyykqNk8eEeUlUkB3U0M4FApyaHraT65ihJhDpQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <title>Goggle movies</title>
    <script src="index.js" defer></script>
</head>

<body>
    <div class="container">
        <div class="item">
          <img src="https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg" alt="" srcset="">
          <img src="https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img src="https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg" alt="" srcset="">
            <img src="https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img src="https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg" alt="" srcset="">
            <img src="https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg" alt="" srcset="">
        </div>
        <div class="item">
            <img src="https://i.ibb.co/1MYMcPX/MV5-BY2-Q1-Zj-Bj-MTMt-Nj-Qx-OS00-OTRk-LThm-Zj-Ut-ZWUy-Mz-Vh-MTA4-MGE1-Xk-Ey-Xk-Fqc-Gde-QXVy-NTgx-ODY.jpg" alt="" srcset="">
            <img src="https://i.ibb.co/TMn41Gs/ezgif-com-gif-maker.jpg" alt="" srcset="">
        </div>
    </div>
</body>


</html>

what i want the transition to be:
enter image description here

thanks in advance and plz ask if you think there is smtg mistake on my side on explaining

Tags:

2

Answers


  1. 0

    how about decreasing the width of img:hover to 285px?

    Login or Signup to reply.
  2. 0

    Just change width to max-width for the img element:

    img {
  height: 100%;
  max-width: 100%;
  border-radius: 12px;
  object-fit: cover;
}

    Working Example

    @import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Roboto&family=Shantell+Sans:ital,wght@1,300&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.item {
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: grey;
    text-align: start;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    width: 300px;
}

.image {
    height: 160px;
    width: 130px;
    transition: width 0.5s ease-in-out;
    /* -webkit-transition: background-image 0.2s ease-in-out;
transition: background-image 0.2s ease-in-out; */
}

img {
    height: 100%;
    max-width: 100%;
    border-radius: 12px;
    object-fit: cover;
}

.title {
    margin-top: 0.5rem;
    text-indent: 4px;
    font-size: 0.8rem;
}

.image:hover {
    width: 300px;
}
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Goggle movies</title>
</head>

<body>
    <div class="container">
        <div class="items">
            <a href="" class="item">
                <div class="image">
                    <img src="https://cdn.tollywood.net/wp-content/uploads/2022/12/18-Pages-Movie-Review-and-Rating-jpg.webp" alt="" srcset="">
                </div>
                <p class="title">18 Pages</p>
            </a>
        </div>
    </div>
</body>

                
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search