martinatina
Neues Mitglied
CSS:
.grid-container {
margin-top: 60px;
display: inline-grid;
grid-template-columns: auto auto auto;
grid-column-gap: 29.5px;
grid-row-gap: 29.5px;
}
.Gitterbilder{width: 313.5px;}
.Gitterbilder{
opacity: 1;
transition: .5s ease;}
.content{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size:60px;
color: #fff;
white-space: nowrap;
overflow: hidden;
}
.content a{
font-size: 12pt;
display: block;
text-align: center;
padding: 10px;
cursor: pointer;
font-family: 'Josefin Sans', sans-serif;
text-transform: uppercase;
line-height: 22px;
}
.overlay{
opacity: 0;
}
.grid-item:hover img{
opacity: .1;
}
.grid-item:hover .overlay{
opacity: 1;
}
.grid-item:hover .content a{
color: black;
}
.grid-item {
position: relative;
}
HTML:
<div class="wrapper">
<h1>XXX</h1>
<h2>XXX</h2>
<div class="grid-container">
<div class="grid-item">
<figure>
<img class="Gitterbilder" src="Bilder/a.jpg" alt="x"></figure>
<div class="overlay">
<div class="content">
<a>x</a>
</div>
</div>
</div>
<div class="grid-item">
<figure>
<img class="Gitterbilder" src="Bilder/x.jpg" alt="x">
</figure>
<div class="overlay">
<div class="content">
<a href="D.html">x</a>
</div>
</div>
</div>
<div class="grid-item">
<figure> <img class="Gitterbilder" src="Bilder/e.jpg" alt="x"></figure>
<div class="overlay">
<div class="content">
<a>x</a>
</div>
</div>
</div>
<div class="grid-item">
<figure> <img class="Gitterbilder" src="Bilder/k.jpg" alt="x"></figure>
<div class="overlay">
<div class="content">
<a href="x.html">x</a>
</div>
</div>
</div>
<div class="grid-item">
<figure> <img class="Gitterbilder" src="Bilder/x.jpg" alt="x">
<div class="overlay">
<div class="content">
<a href="x.html">x</a>
</div>
</div>
</figure>
</div>
<div class="grid-item">
<figure> <img class="Gitterbilder" src="Bilder/x.jpg" alt="x">
<div class="overlay">
<div class="content">
<a href="x.html">x</a>
</div>
</div>
</figure>
</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
</div>
Das habe ich bis jetzt versucht:
CSS:
@media only screen and (max-width: 700px) {
body {
background-color: lightblue;
}
.wrapper {
max-width: 313.5px;
margin: 25px auto;
margin-top: 120px;
}
h2{
font-family: 'Lato', sans-serif;
font-size: 11.5pt;
font-weight: 400;
width: 300px;
line-height: 16pt;
}
.grid-container {
margin-top: 60px;
display: inline-grid;
grid-column-gap: 29.5px;
grid-row-gap: 29.5px;
grid-template-columns: none;
}
}
@media only screen and (max-width: 1050px) and (min-width: 701px) {
body {
background-color: lightblue;
}
.wrapper {
max-width: 313.5px;
margin-top: 120px;
}
h2{
font-family: 'Lato', sans-serif;
font-size: 11.5pt;
font-weight: 400;
width: 300px;
line-height: 16pt;
}
.grid-container {
margin-top: 60px;
display: inline-grid;
grid-column-gap: 29.5px;
grid-row-gap: 29.5px;
grid-template-columns: auto auto;
align-content: center
}
}
Ich würde ja ein fertiges hernehmen, nur gibt es keines bzw ich finde keines im Internet wo es 9 Quadrate gibt, ich links und rechts einen Abstand einstellen kannn und die Bilder nicht verzerren, bzw die Boxen ihre Größe, Breite etc ändern oder komisch an die Bilder gezoomt wird :(
Bei dem unter 700px klappt es ja, wie mache ich das aber bei dem wo 2 Quadrate nebeneinander sein sollen?