1
J'ai ajouté du code sur mon site Web à l'aide d'un générateur Divi, dans le but d'ajouter un effet de survol de la légende d'image animée, sur la grille d'images - quatre rangées. Tout semble bien, sauf quand je redimensionne l'écran: les images commencent à se chevaucher.Images en chevauchement de la grille lors du redimensionnement de l'écran
J'ai fait beaucoup de recherche et joué avec un code mais je ne peux pas résoudre ce problème. S'il vous plaît aidez-moi à trouver quelle partie du code CSS représente ce chevauchement?
URL de la page est: http://sylwia.studiopowisle.pl/bb/
.box {
height: 250px;
position: relative;
overflow: hidden;
width: 250px;
margin-left: auto;
margin-right: auto;
}
.box img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .overbox {
background-color: rgba(163, 0, 0, 0.8);
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 250px;
height: 250px;
padding: 130px 20px;
}
.box:hover .overbox {
opacity: 1;
}
.box .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.box .title {
font-size: 2.5em;
text-transform: uppercase;
opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}
.box:hover .title,
.box:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.box .tagline {
font-size: 0.8em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
text-align: center;
}
.box:hover .tagline,
.box:focus .tagline {
opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
.mendo-links {
text-transform: lowercase;
font-size: 36px;
position: relative;
color: white;
text-shadow: 3px 0 29px rgba(0, 0, 0, 0.28);
text-align: center;
vertical-align: middle;
margin-top: 26%;
}
.mendo-links-purpose {
font-size: 40px;
position: absolute;
top: 40%;
left: 21%;
color: white;
text-shadow: 3px 0 29px rgba(0, 0, 0, 0.28);
}
.mendo-links-passion {
font-size: 40px;
position: absolute;
top: 40%;
left: 23%;
color: white;
text-shadow: 3px 0 29px rgba(0, 0, 0, 0.28);
}
.mendo-lines {
position: absolute;
width: 37%;
top: 33%;
left: 32% !important;
}
.box:hover h4 {
display: none;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.box:hover .mendo-lines {
display: none;
-webkit-transition: all 400ms ease-out;
-moz-transition: all 400ms ease-out;
-o-transition: all 400ms ease-out;
-ms-transition: all 400ms ease-out;
transition: all 400ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);
}
.mendo-links-outline {
position: absolute;
width: 91%;
top: 5%;
left: 4.5% !important;
}
.mendo-links-title {
text-transform: lowercase;
font-size: 25px;
text-align: center;
margin-top: -100px !important;
}
.mendo-links-title:first-letter {
text-transform: uppercase;
}
.mendo-links-description {
text-align: center;
font-size: 12px;
margin-left: 20px;
margin-right: 20px;
margin-top: 22px;
line-height: 18px;
margin-bottom: 10px;
}
.mendo-links-read-more {
color: white;
font-size: 13px;
font-weight: bold;
}<a href="/core-values">
<div class="box">
<p>
<img src="http://sylwia.studiopowisle.pl/wp-
content/uploads/2017/04/Untitled-3.jpg" alt="" />
</p>
<div class="overbox">
<p>
<img class="mendo-links-outline" src="http://sylwia.studiopowisle.pl/wp-
content/uploads/2017/04/outline-2.png" alt="" />
</p>
<div class="title overtext">
<p class="mendo-links-title">Web Design</p>
</div>
<div class="tagline overtext">
<p class="mendo-links-description">Synth jean shorts try-hard art party meh disrupt, forage offal ugh readymade cronut man braid. Readymade chartreuse pinterest sartorial, sustainable hoodie art party.
</p>
<p class="mendo-links-read-more">+ learn more</p>
</div>
</div>
</div>
</a>Merci ver beaucoup pour votre aide et le temps, meilleurs salutations, Sylwia