1. Accueil
  2. Question et réponse
  3. Comment créer une superposition transparente au-dessus de l'image avec du texte?

Comment créer une superposition transparente au-dessus de l'image avec du texte?

2017-08-22 4 views
3

Je veux créer une superposition transparente d'images sombres au-dessus de l'image avec du texte. avec une belle transition en vol stationnaire.Comment créer une superposition transparente au-dessus de l'image avec du texte?

.study1 { 
 
    background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg"); 
 
    height: 300px; 
 
    width: 400px; 
 
} 
 

 
.title { 
 
    margin: 0 auto; 
 
    width: 60%; 
 
    display: block; 
 
    font-size: 1.25em; 
 
    color: #ccc; 
 
    text-align: center; 
 
padding-top: 120px; 
 
}
<div class="study1"> 
 

 
    <div class=""> 
 
    <a class="title" href="#">View Case Study</a> 
 
    </div> 
 
</div>

la conception que je voulais est la suivante:

the design I wanted is this

Source

2017-08-22 Belgin Varghese

+0

Copie possible de [Comment faire en CSS une superposition sur une image?] (Https://stackoverflow.com/questions/21086385/how-to-make-in-css-an-overlay-over-an- image) –

+1

je pense que cela va vous aider https://codepen.io/littlesnippets/pen/LpgRxo –

+1

http://freefrontend.com/css-image-effects/ consultez cet article aussi –

Répondre

2 

.study1 { 
 
    background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg"); 
 
    height: 300px; 
 
    width: 400px; 
 
    position:relative; 
 
    z-index:1; 
 
} 
 
.study1:after{ 
 
    content:""; 
 
    position:absolute; 
 
    left:0; 
 
    right:0; 
 
    top:0; 
 
    bottom:0; 
 
    margin:auto; 
 
    width:100%; 
 
    height:100%; 
 
    background:rgba(0,0,0,0.5); 
 
    z-index:-1; 
 
} 
 

 
.title { 
 
    margin: 0 auto; 
 
    width: 60%; 
 
    display: block; 
 
    font-size: 1.25em; 
 
    color: #ccc; 
 
    text-align: center; 
 
padding-top: 120px; 
 
} 
 
.transparent-dark { 
 
     background: rgba(0, 0, 0, 0.5); 
 
     
 
     height:100%; 
 
     
 
    }
<div class="study1"> 
 

 
    <div class="transparent-dark"> 
 
    <a class="title" href="#">View Case Study</a> 
 
    </div> 
 
</div>

Source

2017-08-22 05:29:04 Kenneth

+0

Vous devriez être plus descriptif. Quel élément HTML devrait avoir la classe '.transparent-dark'? A-t-il besoin d'ajouter un nouveau balisage? Pouvez-vous nous donner un exemple de travail, puisque l'auteur de la question fournit même un StackSnippet pour vous? –

1

Voir ci-dessous. En utilisant le pseudo-code :after, l'arrière-plan est défini avec l'opacité 0. En survol, l'opacité passe à 0,3 avec une durée de 1 seconde.

.study1 { 
 
    background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg"); 
 
    height: 300px; 
 
    width: 400px; 
 
    position: relative; 
 
} 
 

 
.study1:after { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0); 
 
    transition: background 1s ease; 
 
} 
 

 
.study1:hover:after { 
 
    background: rgba(0, 0, 0, 0.3); 
 
} 
 

 
.title { 
 
    margin: 0 auto; 
 
    width: 60%; 
 
    display: block; 
 
    font-size: 1.25em; 
 
    color: #ccc; 
 
    text-align: center; 
 
    padding-top: 120px; 
 
}
<div class="study1"> 
 
    <div class=""> 
 
    <a class="title" href="#">View Case Study</a> 
 
    </div> 
 
</div>

Source

2017-08-22 05:34:12 Gerard

1

Utilisez ce code

.study1 { 
 
    background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg"); 
 
    height: 300px; 
 
    width: 400px; 
 
    position:relative; 
 
    z-index:1; 
 
} 
 
.study1:after{ 
 
    content:""; 
 
    position:absolute; 
 
    left:0; 
 
    right:0; 
 
    top:0; 
 
    bottom:0; 
 
    margin:auto; 
 
    width:100%; 
 
    height:100%; 
 
    background:rgba(0,0,0,0.5); 
 
    z-index:-1; 
 
    -webkit-transform:scale(0); 
 
    transform:scale(0); 
 
    -webkit-transition:0.5s; 
 
    transition:0.5s 
 
} 
 
.study1:hover:after{ 
 
    -webkit-transform:scale(1); 
 
    transform:scale(1); 
 
} 
 

 
.title { 
 
    margin: 0 auto; 
 
    width: 60%; 
 
    display: block; 
 
    font-size: 1.25em; 
 
    color: #ccc; 
 
    text-align: center; 
 
padding-top: 120px; 
 
}
<div class="study1"> 
 

 
    <div class=""> 
 
    <a class="title" href="#">View Case Study</a> 
 
    </div> 
 
</div>

Source

2017-08-22 05:34:39

1

Réglez la superposition d'image sombre transparente en utilisant la classe .wrapper mentionné dans le violon de js, définir la position: relative à .study1 et positionner r éléments en conséquence.

Here est le violon js.

Source

2017-08-22 05:38:09 kmg

1

Cela peut servir votre but

.image { 
 
    position:relative; 
 
    width:200px; 
 
    height:200px; 
 
} 
 
.image img { 
 
    width:100%; 
 
    vertical-align:top; 
 
} 
 
.image:after { 
 
    content: attr(data-content); 
 
    color:#fff; 
 
    position:absolute; 
 
    width:100%; height:100%; 
 
    top:0; left:0; 
 
    background:rgba(0,0,0,0.6); 
 
    opacity:0; 
 
    transition: all 0.5s; 
 
    -webkit-transition: all 0.5s; 
 
} 
 
.image:hover:after { 
 
    opacity:1; 
 
}
<div data-content="Here is some text added on hover via a content value of attr(data-content)" class="image"> 
 
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" /> 
 
</div>

pour plus de détails s'il vous plaît allez here https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css

Source

2017-08-22 05:44:17

1 

.study1 { 
 
    background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg"); 
 
    height: 300px; 
 
    width: 400px; 
 
    position: relative; 
 
} 
 
.action { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background-color: rgba(0,0,0,0.4); 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 0; 
 
    transition: .5s ease; 
 
} 
 
.study1:hover .action { 
 
\t height: 100%; 
 
} 
 
.title { 
 
    white-space: nowrap; 
 
    color: white; 
 
    font-size: 20px; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
}
<div class="study1"> 
 

 
    <div class="action"> 
 
    <a class="title" href="#">View Case Study</a> 
 
    </div> 
 
</div>

Je pense que cela peut répondre à vos besoins. Une transition soignée.

Source

2017-08-22 06:02:06 Rajez

0 

.container { 
 
    display: flex; 
 
    position: relative; 
 
    border: 1px solid: #ddd; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    left: 0; 
 
    padding: 20px; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    background-color: rgba(127, 127, 127, 0.6); 
 
    transition: all 0.3s ease; 
 
} 
 
.content { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-image: url('http://mays.tamu.edu/citycentre/wp-content/uploads/sites/44/2015/07/pmbaclass.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 
.text { 
 
    font-size: 25px; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    display: inline-flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    transition: all 0.8s ease; 
 
} 
 
.overlay:hover .text { 
 
    transform: scale(1.2, 1.2); 
 
}
<div class="container"> 
 
    <div class="overlay"> 
 
    <span class="text">The World's finest developers</span> 
 
    </div> 
 
    <div class="content"> 
 
    </div> 
 
</div>

Voici un extrait selon vos besoins.

Source

2017-08-22 06:46:21 Abinthaha

 Questions connexes

  • Aucun problème connexe^_^