Текст, който се появява върху CSS изображения

Пет оригинални ефекта на появата на текст върху изображения, когато задържите курсора.

Текстът се появява от дълбочината на изображението.

Текстът изплува от дълбочината на изображението, въртящ се.

Текстът се изтегля от краищата на изображението.

Текстът се поставя в персонализираните атрибути на данни.

При тази опция освен описанието се показва и заглавието на картинката.

.lake:before display: block; цвят на фона: rgb(0, 0, 0); съдържание: ""; височина: 100%; непрозрачност: 0; позиция: абсолютна; ширина: 100%; z-индекс: 2; >

.lake:after font-family: 'Lucida Console'; цвят: бял; съдържание : attr(alt) ; дисплей: блок; размер на шрифта: 16px; непрозрачност: 0; подплата: 0 3%; позиция: абсолютна; преобразуване на текст: няма; отгоре: 50%; -webkit-transform-origin: 50% 0%; произход на трансформация: 50% 0%; -webkit-transform: scale(0) translateY(-50%); трансформиране: scale(0) translateY(-50%); ширина: 94%; z-индекс: 3; >

.lake img граница: няма; дисплей: блок; z-индекс: 1; >

.lake:after -webkit-transition: всичките 350ms лесно влизане-навън; преход: всичките 350ms леко влизане-навън; >

.lake:hover:before непрозрачност: 0,6; >

.lake:hover:след непрозрачност: 1; -webkit-transform : scale(1) translateY(-50%) ; трансформиране: scale(1) translateY(-50%); >

/стил > /глава > тяло > a class =" lake " href =" # " title ="" alt =" Серебряное е езеро в Звениговски район, Марий Ел, България. Намира се на територията на Суслонгерското военно лесничейство. Езерото се намира в басейна на река Юшут.езерото е възможно само неорганизиран отдих. Оборудвани са туристически паркинги. Ихтиофауна: костур, лин, щука, върховка, рибарка. "> img src =" images/45.jpg " alt=""> /a > /body > /html >

.lake img граница: няма; дисплей: блок; z-индекс: 1; >

.lake:after -webkit-transition: всичките 350ms лесно влизане-навън; преход: всичките 350ms леко влизане-навън; >

.lake:hover:before непрозрачност: 0,6; >

.lake:hover:след непрозрачност: 1; -webkit-transform : scale(1) translateY(-50%) ; трансформиране: scale(1) translateY(-50%); >

.lake:after -webkit-transform: scale(0) rotate(-360deg) translateY(-50%); трансформиране: мащаб(0) завъртане(-360deg) транслиранеY(-50%); >

.lake:hover:after -webkit-transform: scale(1) rotate(0deg) translateY(-50%); трансформиране: scale(1) rotate(0deg) translateY(-50%); > /стил > /глава > тяло > a class =" lake " href =" # " title ="" alt =" Серебряное е езеро в Звениговски район, Марий Ел, България. Намира се на територията на Суслонгерското военно лесничейство. Езерото се намира в басейна на река Юшут, попроизход - интердун. На езерото е възможен само неорганизиран отдих. Оборудвани са туристически паркинги. Ихтиофауна: костур, лин, щука, върховка, рибарка. "> img src =" images/45.jpg " alt=""> /a > /body > /html >

@keyframes появяване 0% трансформация: scaleX(4) scaleY(0) translateY(-50%); > 50% трансформация: scaleX(4) scaleY(1) translateY(-50%); цвят: rgba(255, 255, 255, 0); > 100% трансформация: scaleX(1) scaleY(1) translateY(-50%); цвят: rgba(255, 255, 255, 1) ; > >

@-webkit-ключови кадри изчезват 0% -webkit-transform: scaleX(1) scaleY(1) translateY(-50%); цвят: rgba(255, 255, 255, 1) ; > 50% -webkit-transform: scaleX(4) scaleY(1) translateY(-50%); цвят: rgba(255, 255, 255, 0); > 100% -webkit-transform: scaleX(4) scaleY(0) translateY(-50%); > >

@keyframes изчезват 0% трансформация: scaleX(1) scaleY(1) translateY(-50%); цвят: rgba(255, 255, 255, 1) ; > 50% трансформация: scaleX(4) scaleY(1) translateY(-50%); цвят: rgba(255, 255, 255, 0); > 100% трансформация: scaleX(4) scaleY(0) translateY(-50%); > >

@-webkit-keyframes позициониране 0% z-индекс: 10; > 99% z-индекс: 10; > 100% z-индекс: 1; > >

позициониране на @keyframes 0% z-индекс: 10; > 99% z-индекс: 10; > 100% z-индекс: 1; > >

.lake дисплей: inline-block; преливане: скрито; позиция: относителна; подравняване на текст: център; текстова декорация: няма; >

.lake:before -webkit-animation: изчезване 500ms леко влизане-навън напред; анимация: изчезващи 500ms леко влизане-навън напред; цвят на фона: rgba(0, 0, 0, 0.6) ; цвят: rgba(255,255, 255, 0); съдържание : attr(alt) ; дисплей: блок; font-family : 'Lucida Console' ; размер на шрифта: 16px; подплата: 5% 2%; позиция: абсолютна; преобразуване на текст: няма; отгоре: 50%; -webkit-transform-origin: 50% 0%; произход на трансформация: 50% 0%; ширина: 96%; z-индекс: 5; >

.lake img -webkit-animation: позициониране 510ms леко навътре-навън напред; анимация: позициониране 510ms леко навътре-навън напред; граница: няма; дисплей: блок; позиция: относителна; z-индекс: 10; >

.lake:след непрозрачност: 0; цвят на фона: бял; съдържание: ""; дисплей: блок; височина: 100%; позиция: абсолютна; горе: 0; ширина: 100%; z-индекс: 15; >

.lake:hover:before -webkit-animation: появява се 500ms леко влизане-навън напред; анимация: появяване на 500ms леко влизане и излизане напред; >

/стил > /глава > тяло > a class =" lake " href =" # " title ="" alt =" Серебряно — озеро в Звениговском районе, Марий Ел, Болгария. Намира се на територията на Суслонгерского военного лесхоза. Озерото се намира в басейна на река Юшут, по произход — междинно. На озерото е възможен само неорганизиран отдих. Оборудвани туристически стоянки. Ихтиофауна: окунь, ли нь, щука, верховка, пескарь. "> img src =" images/45.jpg " alt=""> /a > /тяло > /html >

На страниците на блога на WordPress, изображението се поставя чрез загрузчик.

След това, в първите три случая на тази тема се задава клас, след което във файла style.css се въвеждат стилове на класа.

В четвъртото изображение изображението също се зарежда чрез загрузчик, след което се крие в блок div.

В петом — картината се зарежда в папката на шаблона за изображения.

Стили така же вносятся вstyle.css

Пожелавам ви творчески успех.

Промяна

Три пътя водят до знанието: пътят на размисъла е най-благородният път, пътят на подражанието е най-лесният, а пътят на опита е най-горчивият. Конфуций.