javascript - 将鼠标悬停在图像上时，图像会缩小，但尺寸保持不变

Question

我设法让我的照片 slider 工作了。现在它工作正常但是当我让它尝试让它具有抑制性以便它随着窗口大小缩小时一切都出错了。而不是图像按比例缩小，整个框按比例缩小。我不确定如何使用它自己的盒子缩小它。在这件事上的任何帮助都会很棒。

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

删除这应该可以解决您的问题，因此 img 将与背景保持相同:

.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>