Hier mein Container für diese Bilder, die ich anstelle des Beispieltextes eines einfachen Textblocks aus der Kategorie "Article" eingesetzt habe:
Hier meine CSS, die in den Bereich "CSS Editor" vom "Code Editor" des Blocks gehört:
#cf {
position: relative;
width: 500px;
max-width: 100%;
height: 350px;
margin: 0 auto;
}
@media (max-width: 768px) {
#cf {
height: 300px;
}
}
@media (max-width: 576px) {
#cf {
height: 250px;
}
}
#cf img {
position: absolute;
left: 0;
height: auto;
width: 500px;
max-width: 100%;
cursor: pointer;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity: 0;
}
.mbr-text P {
text-align: center;
}
img {
border-radius: 25px;
}