Jak zrobić efekt podobny do strony na mirosławzelent.pl

pytanie zadane 22 maja 2015 w HTML i CSS przez Alvaro Nowicjusz (230 p.)

witajcie w jaki sposób napisać coś takiego jak na stronie mirosławzelent.pl?

to coś takiego by był obrazek i jakby sie na niego najechało to by była wybrana treść + zmienione tło obrazka tak jak powyżej?

prosiłbym o jakiś tut

3 odpowiedzi

odpowiedź 22 maja 2015 przez aspoka Mądrala (5,290 p.)

odpowiedź 22 maja 2015 przez Comandeer Guru (601,590 p.)

Zamiast tutka - kod z komentarzami:

<!DOCTYPE html>
	<html lang="pl" dir="ltr" class="no-js">
		<head>
			<meta charset="UTF-8">
			<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
			<title>Ehhhh</title>
			<style>
			.tile
			{
				display: inline-block;
				width: 320px; /*ustawiamy wymiary jak dla obrazka w tle*/
				height: 220px;
				overflow: hidden; /*to żeby nic nie wystawało*/
				position: relative;/*to, żebyśmy mogli pozycjonować elementy wewnątrz takiego "kafelka"*/
			}
			.tile-img, .tile-caption /*obrazek tła, jak i etykietkę rozciągamy na cały "kafelek"*/
			{
				position: absolute;
				top: 0;
				bottom: 0; /*ustawienie zerowej odległości od góry i od dołu równocześnie rozciąga element na całego rodzica*/
				left: 0;
				right: 0; /*w poziomie też to działa*/
			}
			.tile-caption
			{
				background: rgba(10, 250, 20, .4); /*etykietce nadajemy półprzezroczyste tło*/
				padding: 20px; /*jakieś tam style ;)*/
				top: 100%; /*każemy mieć etykietce zerową wysokość (top: 100% = bottom: 0)*/
				transition: top .3s ease-in-out; /*każemy przeglądarce animować własność top (czyli odległość tego elementu od górnej krawędzi rodzica)*/
			}
			.tile:hover .tile-caption /*gdy najedziemy na kafelek…*/
			{
				top: 0; /*…etykietka ma powędrować do góry*/
			}
			</style>
		</head>
		<body>
			<figure class="tile"> <!-- zamiast <figure> może być np. <div> -->
				<img src="https://www.comandeer.pl/images/tooltips/poland.png" class="tile-img" width="320" height="220" alt=""> <!-- obrazka bym nie tykał ;) Pusty [alt], bo cały opis jest w .tile-caption a nie potrzeba dublować treści -->
				<figcaption class="tile-caption"> <!-- jeśli zamiast <figure> masz <div>, to tutaj zmień też na <div> -->
					<p>Napisik</p>
				</figcaption>
			</figure>
		</body>
	</html>

Pokaż 6 poprzednich komentarzy

komentarz 24 maja 2015 przez Alvaro Nowicjusz (230 p.)

<!DOCTYPE html>
    <html lang="pl" dir="ltr" class="no-js">
        <head>
            <meta charset="UTF-8">
            <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
            <title>Ehhhh</title>
            <style>
            .tile
            {
                display: inline-block;
                width: 320px; /*ustawiamy wymiary jak dla obrazka w tle*/
                height: 220px;
                overflow: hidden; /*to żeby nic nie wystawało*/
                position: relative;/*to, żebyśmy mogli pozycjonować elementy wewnątrz takiego "kafelka"*/
            }
            .tile-img, .tile-caption /*obrazek tła, jak i etykietkę rozciągamy na cały "kafelek"*/
            {
                position: absolute;
                top: 0;
                bottom: 0; /*ustawienie zerowej odległości od góry i od dołu równocześnie rozciąga element na całego rodzica*/
                left: 0;
                right: 0; /*w poziomie też to działa*/
            }
            .tile-caption
            {
                background: rgba(10, 250, 20, .4); /*etykietce nadajemy półprzezroczyste tło*/
                padding: 20px; /*jakieś tam style ;)*/
                top: 100%; /*każemy mieć etykietce zerową wysokość (top: 100% = bottom: 0)*/
                transition: top .3s ease-in-out; /*każemy przeglądarce animować własność top (czyli odległość tego elementu od górnej krawędzi rodzica)*/
            }
            .tile:hover .tile-caption /*gdy najedziemy na kafelek…*/
            {
                top: 0; /*…etykietka ma powędrować do góry*/
            }
            </style>
        </head>
        <body>
            <figure class="tile"> 
                <img src="<a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1KIfHY9ogkPWhlKa-otYHY9P3RP2HKNLZll_EgchBEaDPdetR_g" "="" rel="nofollow" target="_blank" original-title="" title="">https://www.comandeer.pl/images/tooltips/poland.png"</a> class="tile-img" width="320" height="220" alt=""> 
                <figcaption class="tile-caption"> 
                    <p>Napisik</p>
                </figcaption>
            </figure>
        </body>
    </html>

komentarz 24 maja 2015 przez Comandeer Guru (601,590 p.)

Dalej masz tam to <a>…

<!DOCTYPE html>
    <html lang="pl" dir="ltr" class="no-js">
        <head>
            <meta charset="UTF-8">
            <script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
            <title>Ehhhh</title>
            <style>
            .tile
            {
                display: inline-block;
                width: 320px; /*ustawiamy wymiary jak dla obrazka w tle*/
                height: 220px;
                overflow: hidden; /*to żeby nic nie wystawało*/
                position: relative;/*to, żebyśmy mogli pozycjonować elementy wewnątrz takiego "kafelka"*/
            }
            .tile-img, .tile-caption /*obrazek tła, jak i etykietkę rozciągamy na cały "kafelek"*/
            {
                position: absolute;
                top: 0;
                bottom: 0; /*ustawienie zerowej odległości od góry i od dołu równocześnie rozciąga element na całego rodzica*/
                left: 0;
                right: 0; /*w poziomie też to działa*/
            }
            .tile-caption
            {
                background: rgba(10, 250, 20, .4); /*etykietce nadajemy półprzezroczyste tło*/
                padding: 20px; /*jakieś tam style ;)*/
                top: 100%; /*każemy mieć etykietce zerową wysokość (top: 100% = bottom: 0)*/
                transition: top .3s ease-in-out; /*każemy przeglądarce animować własność top (czyli odległość tego elementu od górnej krawędzi rodzica)*/
            }
            .tile:hover .tile-caption /*gdy najedziemy na kafelek…*/
            {
                top: 0; /*…etykietka ma powędrować do góry*/
            }
            </style>
        </head>
        <body>
            <figure class="tile"> <!-- zamiast <figure> może być np. <div> -->
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ1KIfHY9ogkPWhlKa-otYHY9P3RP2HKNLZll_EgchBEaDPdetR_g" class="tile-img" width="320" height="220" alt=""> <!-- obrazka bym nie tykał ;) Pusty [alt], bo cały opis jest w .tile-caption a nie potrzeba dublować treści -->
                <figcaption class="tile-caption"> <!-- jeśli zamiast <figure> masz <div>, to tutaj zmień też na <div> -->
                    <p>Napisik</p>
                </figcaption>
            </figure>
        </body>
    </html>

komentarz 26 maja 2015 przez testerius Pasjonat (23,960 p.)

Nom, ale ty Comandeer wrzuciłeś taką linijkę:

<img src="<a title="" original-title="" href="https://www.comandeer.pl/images/tooltips/poland.png" "="" rel="nofollow" target="_blank">https://www.comandeer.pl/images/tooltips/poland.png"</a> class="tile-img" width="320" height="220" alt="">

i w tym tkwi problem.