Image miniature et effet (blogspot)
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
je viens de finir la modification de mon template blogspot mais il me reste 1 point à régler que je n'arrive pas à faire seul.
tout d'abord, voici mon blog. les miniatures en page principale sont en fait les images du billet qui sont etirer. le soucis c'est que du coup les miniatures sont deformé et que ce n'est pas jolie. comment pourrais-je rattraper ça?
et je souhaiterai appliqué un effet sur les miniatures, pour faire en sorte que la miniature soit ternie en blanc et qu'elle apparaisse normalement quand l'on passe la souris dessus.
si vous avez besoin que je laisse le template, dites le moi et je le poste.
bye
je viens de finir la modification de mon template blogspot mais il me reste 1 point à régler que je n'arrive pas à faire seul.
tout d'abord, voici mon blog. les miniatures en page principale sont en fait les images du billet qui sont etirer. le soucis c'est que du coup les miniatures sont deformé et que ce n'est pas jolie. comment pourrais-je rattraper ça?
et je souhaiterai appliqué un effet sur les miniatures, pour faire en sorte que la miniature soit ternie en blanc et qu'elle apparaisse normalement quand l'on passe la souris dessus.
si vous avez besoin que je laisse le template, dites le moi et je le poste.
bye
A voir également:
- Image miniature et effet (blogspot)
- Effet miroir word - Guide
- Image iso - Guide
- Acronis true image - Télécharger - Sauvegarde
- Reduire taille image - Guide
- Légender une image - Guide
5 réponses
Tu copies tes images, tu les modifies avec le programme que tu souhaites.
Et cette image 2 tu la met en background-image:; dans ton a:hover.
Et cette image 2 tu la met en background-image:; dans ton a:hover.
et bien ça ne marche pas. j'ai copier la partie qui est a modifier et mis en gras la section concernant l'image de la miniature. il me faut donc une ligne de code qui puisse s'adapter au differentes images. oula c'ets pas claire ce que je dis... bref, voyez plus bas...
edit: j'ai un element de reponse mais il faut que je l'adapte a ma situation donc... j'ai besoin d'un coup de main voir exemple 2
<b:if cond='data:blog.pageType != "item"'>
<style>
#post-title-wrapper {
background:#ffffff;
clear:both;
left:0;
padding:2px 5px 3px 6px;
position:absolute;
top:50px;
margin-right: 20px;
line-height: 0 auto;
display:inline;
}
.post {
width: 200px;
height:235px;
margin-right: 20px;
margin-bottom: 10px;
float: left;
text-align:justify;
position:relative;
overflow: hidden;
padding-right:0px;
}
.post a:hover {
color:#616161;
text-decoration:none;
}
.post-body {
margin:0px 0 .75em;
line-height:1.6em;
}
.post-body img {
width: 200px;
height:250px;
margin-bottom:900px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:100%;
font-weight:bold;
line-height:0 auto;
color:#000000;
display:inline;
border:none;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#000000;
font-weight:bold;
margin-bottom:0 auto;
border:none;
}
.post h3 strong, .post h3 a:hover {
color:#616161;
border:none;
}
.post-footer {
bottom:0px;
margin:0;
padding:5px 0 0 0;
position:absolute;
right:0px;
display:inline;
background:#000000;
text-transform:none;
}
h2.date-header {
color:#000000;
font-size:18px;
font-weight:normal;
}
.post-footer-line-1 {
display:none;
}
.post-labels {
display:none;
}
.post-footer a{
color: #000000;
font-size:10px;
font-weight: bold;
}
.post-footer a:hover{
color: #616161;
padding-top:2px;
font-size:10px;
font-weight: bold;
text-decoration:none;
}
</style>
</b:if>
edit: j'ai un element de reponse mais il faut que je l'adapte a ma situation donc... j'ai besoin d'un coup de main voir exemple 2
<b:if cond='data:blog.pageType != "item"'>
<style>
#post-title-wrapper {
background:#ffffff;
clear:both;
left:0;
padding:2px 5px 3px 6px;
position:absolute;
top:50px;
margin-right: 20px;
line-height: 0 auto;
display:inline;
}
.post {
width: 200px;
height:235px;
margin-right: 20px;
margin-bottom: 10px;
float: left;
text-align:justify;
position:relative;
overflow: hidden;
padding-right:0px;
}
.post a:hover {
color:#616161;
text-decoration:none;
}
.post-body {
margin:0px 0 .75em;
line-height:1.6em;
}
.post-body img {
width: 200px;
height:250px;
margin-bottom:900px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:100%;
font-weight:bold;
line-height:0 auto;
color:#000000;
display:inline;
border:none;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#000000;
font-weight:bold;
margin-bottom:0 auto;
border:none;
}
.post h3 strong, .post h3 a:hover {
color:#616161;
border:none;
}
.post-footer {
bottom:0px;
margin:0;
padding:5px 0 0 0;
position:absolute;
right:0px;
display:inline;
background:#000000;
text-transform:none;
}
h2.date-header {
color:#000000;
font-size:18px;
font-weight:normal;
}
.post-footer-line-1 {
display:none;
}
.post-labels {
display:none;
}
.post-footer a{
color: #000000;
font-size:10px;
font-weight: bold;
}
.post-footer a:hover{
color: #616161;
padding-top:2px;
font-size:10px;
font-weight: bold;
text-decoration:none;
}
</style>
</b:if>
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
bon je vais finir par résoudre mon soucis tout seul! je tiens a préciser que je n'ai aucune connaissance en programmation, je me débrouille juste comme je peut!
donc, sur
.post-body img {
width: 200px;
height:250px;
margin-bottom:900px;
}
j'ai ajouté opacity: .7; ce qui a rendu m'a miniature opaque mais pas d'interaction avec la souris et mon cadre blanc pour le titre a disparu.
je pense tout de même etre sur la bonne voie, mais il manque encore pas mal de choses! j'attend votre aide!
donc, sur
.post-body img {
width: 200px;
height:250px;
margin-bottom:900px;
}
j'ai ajouté opacity: .7; ce qui a rendu m'a miniature opaque mais pas d'interaction avec la souris et mon cadre blanc pour le titre a disparu.
je pense tout de même etre sur la bonne voie, mais il manque encore pas mal de choses! j'attend votre aide!