JavaScript | Image Hover Effect With Caption (HTML, CSS) ...

USERS LOGIN:

FILES BY LETTERS:

ALL | # A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

FILES BY YEARS:

2024 2023 2022 2021 2020 2019 2018 2017 2016 2015 2014 2013 2012 2011 2010 2009 2008 2007 2006 2005 2004 2003 2002 2001 2000 1999 1998 1997 1996 1995 1994 1993

NEW UPDATES:

CATEGORIES

All in one tools

Antivirus & Malware

Browsers&Plugins

CD installations

Compression tools

Developer tools

Drive:SSD,HDD...

Fiinance managers

Game requirements

Graphics & Photos

Messages & Emails

Network & tools

Portable versions

Security & Firewalls

System utilities

Popular:

TOP

POPULAR

VIDEO

NEWS

LINKS

IMAGES

FORUM

Radio

Guest | Registration

70s HITS 80s HITS 90s HITS Ambient Darksynth Disco Dreamwave Electronic Electropop Horrorsynth House Italo Outrun Rock Space Spacesynth Synthpop Synthwave Techno

Free PC Games Game Cheats Game Upates No - CD/DVD Requirements

Trainers Updates

Torrents Updates

Emulators Nes roms

CSS, JS, STYLE, CODE: 55 scripts / 1 comments ...

A-Z | # A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Image Hover Effect With Caption (HTML, CSS)

August 12, 2024

218 views,

0

JavaScript | Image Hover Effect With Caption (HTML, CSS) ...

Author: LittleSnippets.net

Publiser Software Listings

License: Freeware

Compatibility: N/A

Language: English

DEMO

Similar versions: (35)

Views:

Image Hover Effect - 4 (Pug, SCSS, JS)

583

THREE Image Transition (HTML, CSS, JS)

323

Animated CSS Image (Slim, SCSS)

563

Colorful shadows (HTML, CSS, JS)

592

Animated Covers (HTML, CSS, JS)

523

Simple Pulsing Image Hover Effect (HTML, CSS)

595

show 35 similar results

Image hover effect. Sliding line to the left to display title and deion

Created on: August 27, 2015

Made with: HTML, CSS

ENTIRE CODE

<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
figure.snip0016 {
  font-family: 'Raleway', Arial, sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 310px;
  max-height: 220px;
  width: 100%;
  background: #000000;
  text-align: left;
}
figure.snip0016 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
figure.snip0016 img {
  max-width: 100%;
  opacity: 1;
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip0016 figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 30px 3em;
  width: 100%;
  height: 100%;
}
figure.snip0016 figcaption::before {
  position: absolute;
  top: 30px;
  right: 30px;
  bottom: 30px;
  left: 100%;
  border-left: 4px solid rgba(255, 255, 255, 0.8);
  content: '';
  opacity: 0;
  background-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0016 h2,
figure.snip0016 p {
  margin: 0 0 5px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
}
figure.snip0016 h2 {
  word-spacing: -0.15em;
  font-weight: 300;
  text-transform: uppercase;
  -webkit-transform: translate3d(30%, 0%, 0);
  transform: translate3d(30%, 0%, 0);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}
figure.snip0016 h2 span {
  font-weight: 800;
}
figure.snip0016 p {
  font-weight: 200;
  -webkit-transform: translate3d(0%, 30%, 0);
  transform: translate3d(0%, 30%, 0);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
figure.snip0016 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  color: #ffffff;
}
figure.snip0016:hover img {
  opacity: 0.3;
}
figure.snip0016:hover figcaption h2 {
  opacity: 1;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}
figure.snip0016:hover figcaption p {
  opacity: 0.9;
  -webkit-transform: translate3d(0%, 0%, 0);
  transform: translate3d(0%, 0%, 0);
  -webkit-transition-delay: 0.6s;
  transition-delay: 0.6s;
}
figure.snip0016:hover figcaption::before {
  background: rgba(255, 255, 255, 0);
  left: 30px;
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

/* Demo purposes only */
html {
  height: 100%;
}
body {
  background-color: #212121;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 100%;
}
</style>

<figure class="snip0016">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample41.jpg" alt="sample41"/>
	<figcaption>
		<h2>I think <span>nighttime</span> is dark</h2>
		<p>So you can imagine your fears with less distraction.</p>
		<a href="#"></a>
	</figcaption>			
</figure>
<figure class="snip0016">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample42.jpg" alt="sample42"/>
	<figcaption>
		<h2>I suppose if we couldn't <span>laugh</span></h2>
		<p>At things that don't make sense, we couldn't react to a lot of life.</p>
		<a href="#"></a>
	</figcaption>			
</figure>
<figure class="snip0016">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample43.jpg" alt="sample43"/>
	<figcaption>
		<h2>I think the <span>surest</span> sign </h2>
		<p>That intelligent life exists elsewhere in the universe is that none of it has tried to contact us.</p>
		<a href="#"></a>
	</figcaption>			
</figure>

How to use this HTML Script on your website?

First you need to open the page with a HTML editor such as dream weaver or front page or even note pad , notice that if you using any other page making (ASP, PHP , etc.) languages it doesn't matter. Just open it and access to source file.

When you Open it, there are some codes in HTML called tags:

you have to find something called "BODY"

In HTML code it's like

When you find it just skip a line and copy and paste after body tag the codes which we offered you in this website
Anyways if you couldn't find that just paste the codes in the end of the source file.

Comments 0

There are no comments ...

Note:
Guests comments are allowed ...

POST YOUR COMMENT

Last added codes

Responsive Animated Login Webp

HTML Audio Player (HTML, CSS,

HTML5 Audio Player with Playli

Style outline buttons with (CS

Link with gradient background

Link Fill On Hover (HTML, SCSS

Pure CSS Dropdown Menu (HTML,

Full CSS3 Dropdown Menu (HTML,

Nice dropdown menu! (HTML, CSS

Dropdown menu (HTML, SCSS)

Super Simple CSS Dropdown Menu

Dino Drop Down (HTML, CSS)

Dropdown Dark/light - Pure CSS

SOCIJAL MEDIA:

ADD THIS TO FACEBOOK

Rating:

RATE:

1 2 3 4 5

Recent Comments

Re: Animated CSS Image (Slim, SCSS)

Guest: OOO THIS IS COOL ...

Site Author 1998 - 2025 ©, All rights reserved | For your question klik here

EU-SEARCH | EU-SEARCH Images | FILESI (english) | NEWS