当您将鼠标悬停在图像上时，图像会缩小

Question

I manged to get my photo slider to work. Now it worked fine but when I got it to try and make it repressive so it scales down with the window size everything went wrong. instead of the image scaling down the whole box scales down. I am not sure how to get it to scale down with the box it self. Any help on this matter would be great.

 var popup = $('.popup'); popup.hover(function() { $(this).toggleClass('open'); }); 

 .popup { margin-bottom: 20px; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); position: relative; -webkit-transition: all 0.5s; transition: all 0.5s; border-style: solid; border-color: rgb(244, 166, 34); border-width: 1px; } .popup .content { width: 40%; height: 100%; position: absolute; right: -40%; top: 0; background: white; transition: all 0.5s; } .popup .wrapper { width: 100%; height: 100%; position: relative; padding: 24px; } .popup .wrapper h2 { font-family: "Georgia", serif; font-style: italic; font-weight: bold; font-size: 26px; line-height: 32px; margin: 8px 0 10px 20px; opacity: 0; transition: all 0.2s; transition-delay: 0.2s; } .popup .wrapper h4 { text-transform: uppercase; color: #999; font-size: 12px; position: relative; top: 4px; opacity: 0; transition: all 0.2s; transition-delay: 0.3s; } .popup .wrapper h4 span { text-transform: none; font-style: italic; font-family: "Georgia", serif; } .popup .wrapper .category { background: #333; padding: 7px 15px; display: inline-block; color: white; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; font-weight: 500; position: absolute; top: -24px; left: 20px; transition: all 0.2s; transition-delay: 0.5s; } .popup .wrapper .line { width: 50px; height: 2px; opacity: 0; background: rgb(244, 166, 34); margin: 16px 0 14px; transition: all 0.2s; transition-delay: 0.4s; } .popup .wrapper p { font-size: 14px; line-height: 24px; opacity: 0; transition: all 0.2s; transition-delay: 0.5s; margin: 0; } .popup .wrapper p span { text-transform: uppercase; font-size: 0.75em; font-weight: 500; letter-spacing: 0.5px; } .popup .wrapper a { display: block; text-align: right; text-decoration: none; font-style: italic; font-size: 12px; color: #999; font-family: "Georgia", serif; margin-top: 12px; transition: all 0.2s; opacity: 0; } .popup .wrapper a i.fa { transition: all 0.2s; margin-left: 2px; color: #E3000C; } .popup .wrapper a:hover { color: #E3000C; } .popup .wrapper a:hover i.fa { margin-left: 12px; } .popup.open .image-container { width: 60%; } .popup.open .content { right: 0; } .popup.open .content .category { top: 0; } .popup.open .content h2 { opacity: 1; margin-left: 0; } .popup.open .content h4 { top: 0; opacity: 1; } .popup.open .content .line { width: 90px; opacity: 1; } .popup.open .content p { opacity: 1; } .popup.open .content a { opacity: 1; } .trigger { position: absolute; top: 24px; right: 24px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: #333; } .drib { text-align: center; display: block; margin-top: 20px; color: #fff; } .drib .fa { color: #ea4c89; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="section"> <div class="container"> <h1>PORTFOLIO</h1> <span class="border"></span> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="popup"> <div class="image-container"> <img src="https://placehold.it/500x300" alt="my image" class="img-responsive"> </div> <div class="content"> <div class="wrapper"> <div class="category">Web Design Project</div> <h2>"Into The New You" Health App</h2> <div class="line"></div> <p>A web application to help people lead a healthier lifestyle. This was my Final year project for university. Using languages such as AJAX, JQuery, MySQL etc. Allowing the user to register and have their own space on the site. </p> </div> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="popup"> <div class="image-container"> <img src="https://placehold.it/500x300" alt="my image" class="img-responsive"> </div> <div class="content"> <div class="wrapper"> <div class="category">Web Design Project</div> <h2>3D Virtual Museum</h2> <div class="line"></div> <p>A project which allowed the user to view 3D models of medieval weapons which had been created in 3D Max and then extracted and uploaded to the site. Users could play around with the model, change the colour of it, size etc. Giving the site an interactive feel. </p> </div> </div> </div> </div> </div> </div> </div> 

Answer 1

Remove this should fix your problem, so the img will stay the same as a background:

.popup.open .image-container {
  width: 60%;
}

 var popup = $('.popup'); popup.hover(function() { $(this).toggleClass('open'); }); 

 .popup { margin-bottom: 20px; border-radius: 5px; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); position: relative; -webkit-transition: all 0.5s; transition: all 0.5s; border-style: solid; border-color: rgb(244, 166, 34); border-width: 1px; } .popup .content { width: 40%; height: 100%; position: absolute; right: -40%; top: 0; background: white; transition: all 0.5s; } .popup .wrapper { width: 100%; height: 100%; position: relative; padding: 24px; } .popup .wrapper h2 { font-family: "Georgia", serif; font-style: italic; font-weight: bold; font-size: 26px; line-height: 32px; margin: 8px 0 10px 20px; opacity: 0; transition: all 0.2s; transition-delay: 0.2s; } .popup .wrapper h4 { text-transform: uppercase; color: #999; font-size: 12px; position: relative; top: 4px; opacity: 0; transition: all 0.2s; transition-delay: 0.3s; } .popup .wrapper h4 span { text-transform: none; font-style: italic; font-family: "Georgia", serif; } .popup .wrapper .category { background: #333; padding: 7px 15px; display: inline-block; color: white; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; font-weight: 500; position: absolute; top: -24px; left: 20px; transition: all 0.2s; transition-delay: 0.5s; } .popup .wrapper .line { width: 50px; height: 2px; opacity: 0; background: rgb(244, 166, 34); margin: 16px 0 14px; transition: all 0.2s; transition-delay: 0.4s; } .popup .wrapper p { font-size: 14px; line-height: 24px; opacity: 0; transition: all 0.2s; transition-delay: 0.5s; margin: 0; } .popup .wrapper p span { text-transform: uppercase; font-size: 0.75em; font-weight: 500; letter-spacing: 0.5px; } .popup .wrapper a { display: block; text-align: right; text-decoration: none; font-style: italic; font-size: 12px; color: #999; font-family: "Georgia", serif; margin-top: 12px; transition: all 0.2s; opacity: 0; } .popup .wrapper a i.fa { transition: all 0.2s; margin-left: 2px; color: #E3000C; } .popup .wrapper a:hover { color: #E3000C; } .popup .wrapper a:hover i.fa { margin-left: 12px; } .popup.open .content { right: 0; } .popup.open .content .category { top: 0; } .popup.open .content h2 { opacity: 1; margin-left: 0; } .popup.open .content h4 { top: 0; opacity: 1; } .popup.open .content .line { width: 90px; opacity: 1; } .popup.open .content p { opacity: 1; } .popup.open .content a { opacity: 1; } .trigger { position: absolute; top: 24px; right: 24px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: #333; } .drib { text-align: center; display: block; margin-top: 20px; color: #fff; } .drib .fa { color: #ea4c89; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="section"> <div class="container"> <h1>PORTFOLIO</h1> <span class="border"></span> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="popup"> <div class="image-container"> <img src="https://placehold.it/500x300" alt="my image" class="img-responsive"> </div> <div class="content"> <div class="wrapper"> <div class="category">Web Design Project</div> <h2>"Into The New You" Health App</h2> <div class="line"></div> <p>A web application to help people lead a healthier lifestyle. This was my Final year project for university. Using languages such as AJAX, JQuery, MySQL etc. Allowing the user to register and have their own space on the site. </p> </div> </div> </div> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <div class="popup"> <div class="image-container"> <img src="https://placehold.it/500x300" alt="my image" class="img-responsive"> </div> <div class="content"> <div class="wrapper"> <div class="category">Web Design Project</div> <h2>3D Virtual Museum</h2> <div class="line"></div> <p>A project which allowed the user to view 3D models of medieval weapons which had been created in 3D Max and then extracted and uploaded to the site. Users could play around with the model, change the colour of it, size etc. Giving the site an interactive feel. </p> </div> </div> </div> </div> </div> </div> </div>