Bonjour à tous.
J'ai un texte avec un image au mileu "wrapper", par align="left".
Puis dans ce texte j'ai aussi une div clignotante.
Le souci est que si le contenu de la div fait bien le tour de l'image, la clignotement de la div elle surpasse l'image.
J'espère d'avoir réussit à vous expliquer assez clairement mon problème
J'ai un texte avec un image au mileu "wrapper", par align="left".
Puis dans ce texte j'ai aussi une div clignotante.
Le souci est que si le contenu de la div fait bien le tour de l'image, la clignotement de la div elle surpasse l'image.
img{width: 50%;}
.more-button-txt-box{
text-align: center;
padding: 10px;
}
.more-button-txt{
display: block;
margin: 15px 0px;
line-height: 1em;
font-size: 4em;
border-top: 1px solid rgb(239, 30, 30);
border-bottom: 1px solid rgb(239, 30, 30);
color: rgb(239, 30, 30);
background-color: #FFF;
}
.more-button-txt {
-webkit-animation: blink 1s linear infinite;
-moz-animation: blink 1s linear infinite;
-ms-animation: blink 1s linear infinite;
-o-animation: blink 1s linear infinite;
animation: blink 1s linear infinite;
}
@-webkit-keyframes blink {
0%, 100% { opacity: 1; }
20%, 80% { opacity: 1; }
30%, 70% { opacity: .75; }
45%, 55% { opacity: 0.5; }
50% { opacity: 0.25; }
}
@-moz-keyframes blink {
0%, 100% { opacity: 1; }
20%, 80% { opacity: 1; }
30%, 70% { opacity: .75; }
45%, 55% { opacity: 0.5; }
50% { opacity: 0.25; }
}
@-ms-keyframes blink {
0%, 100% { opacity: 1; }
20%, 80% { opacity: 1; }
30%, 70% { opacity: .75; }
45%, 55% { opacity: 0.5; }
50% { opacity: 0.25; }
}
@-o-keyframes blink {
0%, 100% { opacity: 1; }
20%, 80% { opacity: 1; }
30%, 70% { opacity: .75; }
45%, 55% { opacity: 0.5; }
50% { opacity: 0.25; }
}
@keyframes blink {
0%, 100% { opacity: 1; }
20%, 80% { opacity: 1; }
30%, 70% { opacity: .75; }
45%, 55% { opacity: 0.5; }
50% { opacity: 0.25; }
}
Mon text commence ... blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla. blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla. <br/> Puis arrive un image .
<img src="https://upload.wikimedia.org/wikipedia/commons/8/81/Eglise_Notre-Dame-des-Gr%C3%A2ces_de_C%C3%A9sar_Bolletti.jpg" align="left">
<h2>Probleme du contenant qui asse par dessu l'image</h2>
<p>J'ai du texte du type blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla.<br/>
Puis un box ou l'on peux cliquer.
<div class="more-button-txt-box">
<a href="https://fr.wikipedia.org/wiki/%C3%89glise_Notre-Dame-des-Gr%C3%A2ces" class="more-button-txt">Voir La suite</a>
</div>
Blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla/
</p>
J'espère d'avoir réussit à vous expliquer assez clairement mon problème