Zmiana zdjecia po kliknięciu.

Question

Dzień dobry,

mam pytanie w jaki sposób po kliknięciu w zdjęcie, one znika i pojawia się w to miejsce tekst?

próbowałem coś w tym stylu 

<style>
 
.kot
{
    color: black;
    font-size: 20px;
	

}  
       
 
.kot div
{
    background-color: green;
    font-size: 20px;
    padding: 50px;
    display: none;
	opacity: 0;
	
}
 
.kot:active div
{
    display: flex;
    font-size: 20px;
    padding: 50px;
    color: #fff;
	visibility: visibile;	
	opacity: 1;
	
}
 
 .kot:active:after div
{
    
	visibility: hidden;	
	opacity: 0;
	
}
 
        </style>


       <div class="kot"><img src="kotczarny.jpg" title="To jest mój czarny kotek" alt="Czarny kotek" width="450px" ><div> Witam witam witam</div></div>
      

ale coś nie wychodzi mi, potrzebuje to zrobić w html/css bez JS. na zasadzie cała zawartość diva(zdjęcie) jest podmieniana na tekst który dalej pojawia się w tym samym divie

Answer 1

w jaki sposób po kliknięciu w zdjęcie, one znika i pojawia się w to miejsce tekst?

Jeżeli chcesz zrobić tego typu podmianę, bez użycia js-a, spróbuj trick-u z

<input type="checkbox" id="name">
<label for="name">
    
    ...
</label>

czy

<label for="name">
    <input type="checkbox" id="name">
    
    ...
</label>

a w css-ie [ :checked ]

input[type=checkbox]:checked {
  ...
}

 

 

 

BTW, parę miesięcy temu padło "podobne" pytanie, i wtedy "urodził się" taki kod, może będzie dla Ciebie inspiracją.