[Mod]
@freetecno qualche mese fa avevi già aperto una discussione con un argomento molto simile, se non uguale. Anche se non hai ricevuto risposte è opportuno continuare sulla stessa discussione già aperta ed evitare di aprire discussioni multiple che trattano lo stesso argomento. In questi casi è possibile riportare la propria discussione in cima rispondendo tu stesso con un semplice "up" (vedi indicazioni nel regolamento di sezione). Per il momento ho unito le due discussioni dato che in quest'ultima hai aggiunto qualche altro dettaglio. Fai attenzione in futuro. Grazie.
[/Mod]
Riguardo la tua richiesta non ci sono soluzioni troppo semplici. Il background gradient potrebbe essere utile ma c'è da sbatterci un po' la testa prima di riuscire ad elaborare qualcosa di ottimale e crossbrowser. Bisogna infatti valutare quanto incide questo fattore nel tuo caso.
Io ho provato ad elaborare qualcosa ma, da quel che ho potuto constatare, mi funziona bene solo su FF, mentre su CH noto qualche taglio creato dal disallineamento delle due parti di background, invece su IE/Edge non appare proprio l'effetto.
Qui il Pen https://codepen.io/OpenDec/pen/zWporZ
Qui il codice:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Covered Image Effect</title>
<meta charset="utf-8">
<style>
body{
background: #C0D1CE;
font-size: 14px;
}
.covered-image-effect {
position: relative;
float: left;
margin: 10px;
padding-bottom: 100px;
background: #fff5;
overflow: hidden;
font: 1em/1 Tahoma, Geneva, sans-serif;
}
.covered-image-effect>img {
float: left;
}
.covered-image-effect>.caption {
position: absolute;
z-index: 10;
bottom: -55%;
left: 30px;
right: 10px;
height: 100%;
margin-bottom: -50px;
color: white;
}
.covered-image-effect>.caption:before {
content: '“';
display: inline-block;
position: absolute;
top: 0;
font: 6em/0 Georgia, serif;
opacity: .8;
}
.covered-image-effect:after {
content:'';
display: block;
position: absolute;
z-index: 0;
bottom: -55%;
right: -62%;
width: 200%;
height: 200%;
box-sizing: border-box;
background:
linear-gradient(
-30deg,
#0061ab,
#0061ab 50%,
#06a8dd 50%,
#06a8dd calc(50% + 14px),
#0003 calc(50% + 14px),
transparent calc(50% + 20px),
transparent
),
linear-gradient(
30deg,
#0061ab,
#0061ab 50%,
#06a8dd 50%,
#06a8dd calc(50% + 14px),
#0003 calc(50% + 14px),
transparent calc(50% + 20px),
transparent
) right;
background-size: 50% 100%;
background-repeat: no-repeat;
}
/* -- ANIMATED HOVER EFFECT -- */
.covered-image-effect:after,
.covered-image-effect>.caption {
transition: bottom .35s ease-in-out;
}
.covered-image-effect:hover:after,
.covered-image-effect:hover>.caption {
bottom: -100%;
}
</style>
</head>
<body>
<figure class="covered-image-effect"><img alt="" src="http://lorempixel.com/400/300"><figcaption class="caption">Lorem ipsum<br><br>Consectetur adipiscing elit nullam suscipit metus id sem eleifend, ut molestie eros dictum</figcaption></figure>
<figure class="covered-image-effect"><img alt="" src="http://lorempixel.com/200/300"><figcaption class="caption">Consectetur adipiscing elit</figcaption></figure>
<figure class="covered-image-effect"><img alt="" src="http://lorempixel.com/100/300"><figcaption class="caption">Morbi venenatis</figcaption></figure>
<figure class="covered-image-effect"><img alt="" src="http://lorempixel.com/150/150"><figcaption class="caption">Suspendisse malesuada massa lorem</figcaption></figure>
<figure class="covered-image-effect"><img alt="" src="http://lorempixel.com/300/150"><figcaption class="caption">Nunc eget lacus at arcu scelerisque gravida ut non lectus, ut molestie eros dictum</figcaption></figure>
</body>
</html>
Se ti va di provare ad aggiustarlo per renderlo crossbrowser...
In alternativa, un'altra soluzione più pratica può essere l'uso di un'immagine SVG. Magari può essere incorporata anche direttamente sul codice. Però anche in questo caso non so quanto possa essere crossbrowser. Con i browser moderni non dovrebbero comunque esserci problemi.
Vedi tu.