bir görüntüyü nasıl karartır ve metinde başka bir resmi nasıl soldurur?

Question

Kodlamada nispeten yeniyim ve bunu yapmaya çalışıyorum, böylece bir görüntü farklı bir görüntüde kayboluyor ve resmin üzerinde metin var.

Tumblr kullanıyorum, bu yüzden PHP-5 sadece MVC Oldukça eminim. Ve burada ben bugüne kadar ne:

<style> 
 
    #imagefade { 
 
    background-image: url('http://i65.tinypic.com/107kqbq.jpg'); 
 
    position: absolute; 
 
    } 
 
    #imagefade img { 
 
    -webkit-transition: all ease 1.5s; 
 
    -moz-transition: all ease 1.5s; 
 
    -o-transition: all ease 1.5s; 
 
    -ms-transition: all ease 1.5s; 
 
    transition: all ease 1.5s; 
 
    } 
 
    #imagefade img:hover { 
 
    opacity: 0; 
 
    } 
 
    #text { 
 
    position: center; 
 
    } 
 
    .image { 
 
    position: relative; 
 
    } 
 
    p { 
 
    position: absolute; 
 
    top: 200px; 
 
    left: 38px; 
 
    width: 100%; 
 
    font-family: arial; 
 
    font-size: 12px; 
 
    color: white; 
 
    } 
 
</style> 
 

 
<div id="imagefade"> 
 
    <img src="http://i68.tinypic.com/2i9s4eb.jpg" /> 
 
    <p>text heading here</p> 
 
</div>

Answer 1

Ne istediğini dan doğru geldiyseniz, bunu yapmanın en kolay yolu bunu başarmak için :hover üzerine position: absolute; ve opacity kullanmaktır. Konumlandırma, katmanları birbirinin üzerine ve birbirinin yanına yerleştirmeyecektir (örneğinizde olduğu gibi).

Aşağıdaki örneğime bakın.

.container { 
 
    background: lightblue; 
 
    position: relative; 
 
    width: 500px; 
 
    height: 300px; 
 
} 
 

 
.box { 
 
    background-image: url('https://i.imgur.com/AzeiaRY.jpg'); 
 
    background-position: center; 
 
    position: absolute; /* Setting the boxes on top of each other */ 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    display: block; 
 
    transition: opacity .4s ease-in-out; /* Transition the opacity for the :hover */ 
 
} 
 

 
.image-2 { 
 
    background-position: bottom right; 
 
    opacity: 0; 
 
} 
 

 
.image-1:hover .image-2 { 
 
    opacity: 1; 
 
} 
 

 

 
/* Pure for styling below */ 
 

 
.box-text { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    color: #fff; 
 
    padding: 10px; 
 
    background: rgba(0, 0, 0, .8); 
 
    width: 40%; 
 
    height: 100%; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 

 
    <div class="box image-1"> 
 

 
    <div class="box image-2"> 
 

 
     <div class="box-text"> 
 

 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, mollitia. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim ipsa maxime modi velit similique maiores, porro voluptate? Molestias ratione natus consequatur libero eaque 
 
      pariatur optio quisquam minima. Nemo quis, odit. 
 
     </p> 
 

 
     </div> 
 

 
    </div> 
 

 
    </div> 
 
</div>