1
Ich habe einen Code zu meiner Website mit einem Divi-Builder, in Zweck hinzugefügt hinzugefügt animierte Bildtitel Hover-Effekt, auf Raster von Bildern - vier in Reihe. Alles sieht gut aus, außer wenn ich die Größe des Bildschirms verändere: dann beginnen sich die Bilder zu überlappen.Bilder im Raster überlappen beim Ändern der Größe des Bildschirms
Ich habe viel Forschung gemacht und mit einem Code gespielt, aber ich kann dieses Problem nicht lösen. Bitte helfen Sie mir zu finden, welcher Teil des CSS-Codes für diese Überlappung steht?
Seite URL lautet: 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>Danke ver Dank für Ihre Hilfe und Zeit, Beste Grüße, Sylwia