1
我試圖讓我的照片滑塊工作。現在它運行良好，但是當我嘗試使它變得壓抑時，它隨着窗口大小縮小，一切都出錯了。而不是縮小整個方框縮小的圖像。我不知道如何讓它與自己的盒子一起縮小。任何關於此事的幫助都會很大。當您將鼠標懸停在圖片上時，圖片縮小，保持相同尺寸
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>
啊這是完美的，它適用於固定模型，但是當我縮小它，圖像重疊 – RonTheOld
@RonTheOld我沒有看到兩個IMG之間的重疊，你的IMG的方式有多大？ –
圖片尺寸相同586 431，但它在桌面模式下很好，但是當你縮小它們實際上相互重疊時，當他們真的應該去donw到一條新線 – RonTheOld