当您将鼠标悬停在图像上时，图像会缩小，保持相同的大小

时间：2017-05-16 17:16:07

标签： javascript html css html5 css3

我想让我的照片滑块工作。现在它工作正常，但当我得到它试图让它压制所以它缩小与窗口大小一切都出错了。而不是缩小图像整个框缩小。我不知道如何用自己的盒子缩小它。对此事的任何帮助都会很棒。

＆＃13;
＆＃13; 
var popup = $('.popup');

popup.hover(function() {
  $(this).toggleClass('open');
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：2)

删除这可以解决您的问题，因此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>

相关问题
最新问题