Clicky

Skocz do zawartości


Zdjęcie
- - - - -

[CSS]Podpisy pod obrazkami (z artykułu ze strony)

2 odpowiedzi w tym temacie

  • Zaloguj się, aby dodać odpowiedź

#1 Gabriel Pająk

Gabriel Pająk

    Początkujący

  • Użytkownik
  • Pip
  • 2 postów

Napisano 13 listopad 2014 - 18:53

Witam serdecznie,

Znalazłem na stronie ciekawy artykuł (mianowicie ten: http://webmastah.pl/...-bez-uzycia-js/) i oczywiście przeszczęśliwy postanowiłem od razu wypróbować. Na szybko skleciłem takie coś:

<html>
<head>
<style type="text/css">

.title {
    position: relative;
    display: inline-block;
    overflow: hidden;
    border: 1em solid #fff;
    background: #111;
    max-width: 100%;
}
 
.title img {
    display: block;
    transition: all .6s ease-in-out;
    width: 20em;
}
 
.title:before, .title:after {
    content: '';
    position: absolute;
    text-align: center;
    transition: all .6s ease-in-out;
    width: 100%;
}
 
.title:before {
    height: 100%;
}
 
.title:after {
    background: rgba(24, 188, 156,.9);
    color: #fff;
    content: attr(data-title);
    line-height: 1.5em;
	overflow: hidden;
	padding: 1em .5em;
	text-overflow: ellipsis;
	white-space: pre;
	}
.title.slide:after {
 top: -3.5em;
}
 
.title.slide:hover:after {
 top: 0;
}
 
.title.slide.overlay:before {
 background: rgba(24, 188, 156, .5);
 top: -100%;
}
 
.title.slide.overlay:hover:before {
 top: 0;
}
</style>
</head>
<body>


<a href="#" data-title="Lorem ipsum" class="title">
    <img src="cpun.png" alt="" />
</a>
</body>
</html>

iiiii nie działa. Nie mam pojęcia dlaczego, próbowałem innych przykładów z artykułu i też nie potrafię tego uruchomić. Przyznam się że jestem w tym raczej zielony i pewnie coś źle robię, więc gdyby ktoś mógł zerknąć na to i powiedzieć co jest źle byłbym wdzięczny :)



#2 mck

mck

    Jestę Blogerę

  • Admin
  • 1544 postów

Napisano 13 listopad 2014 - 20:46

W linku brakuje klasy slide. Powinno być tak:

<a href="#" data-title="Lorem ipsum" class="title slide">

:)



#3 Gabriel Pająk

Gabriel Pająk

    Początkujący

  • Użytkownik
  • Pip
  • 2 postów

Napisano 13 listopad 2014 - 21:04

Oooo, działa. Jakoś to przeoczyłem, wielkie dzięki :))






Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych