Tekst po najechaniu CSS ?

Question

Witam, zastanawiam się czy w CSS w sekcji hover da się zrobić by po najechaniu na obrazek pojawił sie tekst a obrazek lekko przygasł.

Answer 1

.cont {
  position: relative;
  width: 200px;
  height: 200px;
  background: url('asd.jpg');
}

.cont span.text {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  color: white;
}

.cont .overlay {
  position: absolute;
  top: 0;
  left: 0;
  background: black;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.cont:hover span.text {
  opacity: 1;
}

.cont:hover .overlay {
  opacity: 0.3;
}

<div class="cont">
  <div class="overlay"></div>
  <span class="text">Tekst</span>
</div>

Oczywiście, że tak. Powyżej podany przykład przedstawia taką sytuację.
Klasie .cont przypisujemy pozycjonowanie relatywne, Następnie tworzymy "przyciemniacz" i tekst o pozycji absolutnej (aby mogły się na siebie nakładać). Tekst ma widoczność ustawioną na 0. Kiedy najedziemy na .cont to wyświetli nam tekst i przyciemni obrazek.

Answer 2

Tekst nie wiem, ale zaciemnienie możesz uzyskać funkcją opacity.

Answer 3

Ja bym pokombinował z :after/:before i content:"";

np:

 

img:hover:after{

content: attr(\*tutaj wstaw swój atrybut z html) lub uzyj tekstu pomiedzy "" */;

/* i mozesz tez pokombinować z jego pozycją tak aby znalazł się w centrum */

}

 

i zeby przygasł to ustawic opacity obrazka na załóżmy 0.6 (nie jestem pewien czy zadziala z selektorami after/before) ale mozna od wypadku dopisac cos takiego:

img:hover{
opacity: 0.6;
}

 

Answer 4

Użyj js. Bo tak to będzie zbyt dużo kodu. : C I tak jak kolga mówi, pobaw się z ::after, ::before. Masz tu kod który możesz zmienić na taki jak Ci pasuje. On nie działa poprawnie ale da się to zrobić. Tylko takie rzeczy w js. :) 

Html:

			<div id="cosik">
				<div class="zmiana">
				<div class="cosik-background">
					<span class="tekst">
						
					</span>
				</div>
				</div>
			</div>
           </div>

Css:

#cosik{
	width: 200px;
	height: 200px;
	display: block;
}
.zmiana{
	width: 100%;
	height: 100%;
}
.cosik-background{
	background-color: #fff;
	width: 100%;
	height: 100%;
}
.tekst::before{
	font-size: 20px;
	color: #000;
	content: "Tekst";
}
.zmiana:hover .cosik-background{
	opacity: 0.2;
}
.zmiana:hover .tekst{
	font-size: 25px;
}

Możesz się bawić. : p

Answer 5

mozesz to zrobić w css np tak ze przy hover (najechaniu) tekst zmienia kolor. Tzn. Przed najechaniem ma taki sam kolor jak background, a po najechaniu zmienia się.

jednak moim zdaniem Najlepiej byłoby to zrobić w javascript.

Comments

Tak w javascript można z tym poszaleć, ale ja zadałem sobie pytanie co by było gdybym chciał coś takiego zrobić w CSS.

Pozdrawiam.

---

na pytanie jak można by zrobić to w css też odpowiedzialem, jednak myślę ze w js byloby lepiej. Może jest jeszcze inny sposób w css niż ten który ja wymyśliłem, ale niestety nic mi juz nie przychodzi do głowy.

Answer 6

W CSS w sekcji hover nie da się zrobić, by po najechaniu na obrazek pojawił sie tekst, ale da się go trochę przygasić używając np.:

opacity: 0,2;

W JS można zmienić tekst.