I'm quite new to coding and I'm having trouble with the "hover".
It opens already on other parts of the website, but not on the specific location I want. Also it somehow stays opened after hovering and leaving the position. Does someone know why? :)
.pill1 {
position: absolute;
left: 300px;
top:10px;
opacity: 1;
display: block;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 15%;
left: 38%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
z-index: 100;
}
.container:hover .pill1 {
}
.container:hover .middle {
opacity: 1;
}
.text {
background-color: rgba(22, 32, 162, 0.44);
color: rgba(242, 0, 255, 0.55);
font-family: Akzidenz-Grotesk Pro, bold;
font-size: 20px;
padding: 16px 32px;
width: 300px;
}
<div class="container">
<img src="images/xanax0001.png" alt="Avatar" class="pill1" >
<div class="middle">
<div class="text">"....".</div>
</div>
Related
I have a div, and within it is an image that should work as a link to another page. There is some text laid over it. located here https://wearehomefolks.com/index.php/home/
I have taken this from somewhere else on the web, I may have modified it a little.
I just want the image to link out to the other internal pages. And keep the hover effect.
When I hover over the images of which there are 5, there is no linking action. What is going wrong here please?
<div class="hvrbox">
<a href="https://wearehomefolks.com/index.php/product-category/home-collection/">
<img src="https://wearehomefolks.com/wp-content/uploads/2021/07/Homefolks_Instruments_brass_edition_homefolks_homepage.jpg" alt="Mountains" class="hvrbox-layer_bottom">
</a>
<div class="hvrbox-layer_top">
<div class="hvrbox-text">HOME COLLECTION
</div>
</div>
</div>
css:
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
/*display: inline-block;*/
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
width:100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
width: 100%;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
color: #fff;
/*padding: 15px;*/
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 4rem;
display: inline-block;
position: absolute;
line-height:4.5rem;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
Thanks
You should add pointer-events: none to the overlay (i.e. the CSS rule for .hvrbox .hvrbox-layer_top). That way the click can "go through it" to the linked image to trigger the link:
.hvrbox,
.hvrbox * {
box-sizing: border-box;
}
.hvrbox {
position: relative;
/*display: inline-block;*/
overflow: hidden;
max-width: 100%;
height: auto;
}
.hvrbox img {
max-width: 100%;
width:100%;
}
.hvrbox .hvrbox-layer_bottom {
display: block;
width: 100%;
}
.hvrbox .hvrbox-layer_top {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
color: #fff;
/*padding: 15px;*/
-moz-transition: all 0.4s ease-in-out 0s;
-webkit-transition: all 0.4s ease-in-out 0s;
-ms-transition: all 0.4s ease-in-out 0s;
transition: all 0.4s ease-in-out 0s;
pointer-events:none;
}
.hvrbox:hover .hvrbox-layer_top,
.hvrbox.active .hvrbox-layer_top {
opacity: 1;
}
.hvrbox .hvrbox-text {
text-align: center;
font-size: 4rem;
display: inline-block;
position: absolute;
line-height:4.5rem;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.hvrbox .hvrbox-text_mobile {
font-size: 15px;
border-top: 1px solid rgb(179, 179, 179); /* for old browsers */
border-top: 1px solid rgba(179, 179, 179, 0.7);
margin-top: 5px;
padding-top: 2px;
display: none;
}
.hvrbox.active .hvrbox-text_mobile {
display: block;
}
<div class="hvrbox">
<a href="https://wearehomefolks.com/index.php/product-category/home-collection/">
<img src="https://wearehomefolks.com/wp-content/uploads/2021/07/Homefolks_Instruments_brass_edition_homefolks_homepage.jpg" alt="Mountains" class="hvrbox-layer_bottom">
</a>
<div class="hvrbox-layer_top">
<div class="hvrbox-text">HOME COLLECTION
</div>
</div>
</div>
This question already has answers here:
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 1 year ago.
I am aware that the initial question is answered several times. Usually I know how to do it, so its more a bug fixing question instead of a general question. The code shows a cross which behaves as a toggle. If clicked another 3 elements appear, where the one on the middle gives me headache. I used a fontAwesome icon and can´t figure out why it will not center in this div element.
I am summon a CSS master which could solve my bug. ;)
<!-- fontawesome stylesheet https://fontawesome.com/ -->
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
<style>
html {
margin: auto;
width: 50%;
}
.modal-setting-toggle {
position: relative;
margin-top: 10px;
width:40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.modal-setting-toggle::before, .modal-setting-toggle::after {
content: "";
background: #c3c2c7;
border-radius: 5px;
width: 20px;
height: 5px;
position: absolute;
left: 10px;
top: 18px;
transition: 0.2s ease;
z-index: 1;
}
.modal-setting-toggle::before {
transform: rotate(0deg);
}
.modal-setting-toggle::after {
transform: rotate(-90deg);
}
.modal-setting-toggle:hover::before {
transform: rotate(0deg);
background-color: #3498db;
}
.modal-setting-toggle:hover::after {
transform: rotate(-90deg);
background-color: #3498db;
}
.modal-setting-toggle.open::before {
transform: rotate(45deg);
background-color: #3498db;
}
.modal-setting-toggle.open::after {
transform: rotate(-45deg);
background-color: #3498db;
}
.modal-setting-toggle.open .modal-setting-button {
opacity: 1;
pointer-events: auto;
}
.modal-setting-toggle.open .modal-setting-button:first-of-type {
bottom: -50px;
background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% #ecf0f3;
}
.modal-setting-toggle.open .modal-setting-button:nth-of-type(2) {
bottom: -100px;
background: #ecf0f3;
justify-content: center;
align-items: center;
text-align: center;
transition-delay: 0.05s;
}
.modal-setting-toggle.open .modal-setting-button:last-of-type {
bottom: -150px;
background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 45% #ecf0f3;
transition-delay: 0.1s;
}
.modal-setting-button {
width: 40px;
height: 40px;
border-radius: 10px;
cursor: pointer;
background: #ecf0f3;
position: absolute;
opacity: 0;
pointer-events: none;
box-shadow: inherit;
transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
}
.modal-setting-button:hover {
transform: scale(1.1);
}
</style>
<section id="modal-setting" class="modal box-shadow">
<div style="float: right" class="modal-setting-toggle" onclick="this.classList.toggle('open')">
<div class="modal-setting-button"></div>
<div class="modal-setting-button"><i class="fas fa-link"></i></div>
<div class="modal-setting-button"></div>
</div>
</section>
Add display: flex to .modal-setting-toggle.open .modal-setting-button:nth-of-type(2) to make use of the align-items: center property.
html {
margin: auto;
width: 50%;
}
.modal-setting-toggle {
position: relative;
margin-top: 10px;
width: 40px;
height: 40px;
border-radius: 10px;
background: #ecf0f3;
cursor: pointer;
box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}
.modal-setting-toggle::before,
.modal-setting-toggle::after {
content: "";
background: #c3c2c7;
border-radius: 5px;
width: 20px;
height: 5px;
position: absolute;
left: 10px;
top: 18px;
transition: 0.2s ease;
z-index: 1;
}
.modal-setting-toggle::before {
transform: rotate(0deg);
}
.modal-setting-toggle::after {
transform: rotate(-90deg);
}
.modal-setting-toggle:hover::before {
transform: rotate(0deg);
background-color: #3498db;
}
.modal-setting-toggle:hover::after {
transform: rotate(-90deg);
background-color: #3498db;
}
.modal-setting-toggle.open::before {
transform: rotate(45deg);
background-color: #3498db;
}
.modal-setting-toggle.open::after {
transform: rotate(-45deg);
background-color: #3498db;
}
.modal-setting-toggle.open .modal-setting-button {
opacity: 1;
pointer-events: auto;
}
.modal-setting-toggle.open .modal-setting-button:first-of-type {
bottom: -50px;
background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% #ecf0f3;
}
.modal-setting-toggle.open .modal-setting-button:nth-of-type(2) {
bottom: -100px;
background: #ecf0f3;
justify-content: center;
align-items: center;
text-align: center;
transition-delay: 0.05s;
display: flex; /* ADD THIS */
}
.modal-setting-toggle.open .modal-setting-button:last-of-type {
bottom: -150px;
background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 45% #ecf0f3;
transition-delay: 0.1s;
}
.modal-setting-button {
width: 40px;
height: 40px;
border-radius: 10px;
cursor: pointer;
background: #ecf0f3;
position: absolute;
opacity: 0;
pointer-events: none;
box-shadow: inherit;
transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
}
.modal-setting-button:hover {
transform: scale(1.1);
}
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>
<section id="modal-setting" class="modal box-shadow">
<div style="float: right" class="modal-setting-toggle" onclick="this.classList.toggle('open')">
<div class="modal-setting-button"></div>
<div class="modal-setting-button"><i class="fas fa-link"></i></div>
<div class="modal-setting-button"></div>
</div>
</section>
I've been trying to figure out how I can make a block of text appear to the side of an image when hovered over instead of appearing on top of it, however I can't seem to find any explanations for anything other than having the text fade in on the actual image itself. This is what I've been experimenting with(adapted from w3schools), as of right now it only has the text on the image. If anyone could edit it so that the text comes to the side that would be incredibly helpful.
.container {
position: relative;
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
color: black;
font-size: 16px;
padding: 16px 32px;
}
<div class="container">
<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" alt="placeholder" class="image" style="width:100%">
<div class="middle">
<div class="text">This should be to the side of the image</div>
</div>
</div>
If I understand correctly, you want the text to be outside of the image.
You are using position: relative on the .container, that's why the .middle will stay inside of it, removing that will solve the issue:
.container {
/* position: relative; */
width: 50%;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 0;
left: 50%;
/* transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center; */
}
.container:hover .image {
opacity: 0.3;
}
.container:hover .middle {
opacity: 1;
}
.text {
color: black;
font-size: 16px;
padding: 16px 32px;
}
<div class="container">
<img src="https://via.placeholder.com/350x150" alt="placeholder" class="image" style="width:100%">
<div class="middle">
<div class="text">This should be to the side of the image</div>
</div>
</div>
Check if that's what you need (made myself a quick example) :
.container {
display: flex;
}
.leftBlock {
width: 50%;
height: auto;
transition: all 0.3s ease;
}
.leftBlock:hover {
opacity: 0.5;
}
.leftBlock:hover + .rightBlock {
opacity: 1;
}
.rightBlock {
right: 0;
background-color: #222;
flex-grow: 1;
text-align: center;
vertical-align: middle;
opacity: 0;
transition: all 0.4s ease;
color: #fff;
}
<div class="container">
<img src="https://images.pexels.com/photos/3683056/pexels-photo-3683056.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" class="leftBlock">
<div class="rightBlock">Text Goes Here</div>
</div>
I've search for an answer on the site without any luck. I have centered my logo in my header between my navigation links. I've added an underline hover effect to the links which also added the effect to my logo. I figured out how to remove the hover effect from the logo (pointer-event: none;) but this also keeps me from making the logo a clickable link back to my homepage. I tried placing my logo in a separate div thinking it would be easier to fix the issue but then I spent 3 hours trying to get things properly positioned (obviously, I'm new at web building). So now I've gone back to my original code hoping to get some assistance here. To summarize: How can I keep the hover effect on the nav links while removing it from the logo AND keeping the logo a clickable link to the hopepage? Thank you in advance for your help.
.header {
display: flex;
width: 100%;
margin-top: 0;
padding-top: 10px;
height: 20%;
align-items: center;
justify-content: center;
}
.cc_nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
background-color: white;
}
a {
text-decoration: none;
color: rgba(0, 0, 0, 0.8);
margin: 0 40px;
font-family: Tenar Sans;
font-size: .8em;
}
a {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: rgb(192, 192, 192);
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#logo_Claire {
height: auto;
width: auto;
max-height: 140px;
max-width: 300px;
}
.noHover {
pointer-events: none;
}
<header>
<div class="cc_nav" id="centered_nav">
HOME
SERVICES
ABOUT
<img src="images/logo_2.png" alt="Claire Crawford" id="logo_Claire" />
PORTFOLIO
BLOG
GET IN TOUCH
</div>
</header>
Just add below CSS-
.noHover:hover::before {
background: none;
visibility: hidden;
}
and try below-working demo maybe it can help you.
.header {
display: flex;
width: 100%;
margin-top: 0;
padding-top: 10px;
height: 20%;
align-items: center;
justify-content: center;
}
.cc_nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
background-color: white;
}
a {
text-decoration: none;
color: rgba(0, 0, 0, 0.8);
margin: 0 40px;
font-family: Tenar Sans;
font-size: .8em;
}
a {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: rgb(192, 192, 192);
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#logo_Claire {
height: auto;
width: auto;
max-height: 140px;
max-width: 300px;
}
.noHover:hover::before {
background: none;
visibility: hidden;
}
<header>
<div class="cc_nav" id="centered_nav">
HOME
SERVICES
ABOUT
<img src="images/logo_2.png" alt="Claire Crawford" id="logo_Claire" />
PORTFOLIO
BLOG
GET IN TOUCH
</div>
</header>
Just add css for not hovering on logo and clickable
a.noHover:hover:before {
visibility: visible;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
header{
display: flex;
width: 100%;
margin-top: 0;
padding-top: 10px;
height: 20%;
align-items: center;
justify-content: center;
}
.cc_nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
background-color: white;
}
a{
text-decoration: none;
color: rgba(0,0,0,0.8);
margin: 0 40px;
font-family: Tenar Sans;
font-size: .8em;
}
a {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
a:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: rgb(192,192,192);
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
a.noHover:hover:before {
visibility: visible;
-webkit-transform: scaleX(0);
transform: scaleX(0);
}
#logo_Claire {
height: auto;
width: auto;
max-height: 140px;
max-width: 300px;
}
<header>
<div class="cc_nav" id="centered_nav">
HOME
SERVICES
ABOUT
<img src="https://dummyimage.com/100x50/000/fff" alt="Claire Crawford" id="logo_Claire" />
PORTFOLIO
BLOG
GET IN TOUCH
<div>
</header>
you can try this, It is taking the default properties of anchor tag and you need to overwrite that so specify the important in your class properties
.noHover {
pointer-events: none !important;
}
Assign a class to the navigation links only and define your link and hover styles there.
<div class="cc_nav" id="centered_nav">
<a class="hover" href="">HOME</a>
<a class="hover" href="">SERVICES</a>
<a class="hover" href="">ABOUT</a>
<img src="images/logo_2.png" alt="Claire Crawford" id="logo_Claire" />
<a class="hover" href="">PORTFOLIO</a>
<a class="hover" href="">BLOG</a>
<a class="hover" href="">GET IN TOUCH</a>
<div>
CSS:
.cc_nav {
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
background-color: white;
}
a {
text-decoration: none;
color: rgba(0, 0, 0, 0.8);
margin: 0 40px;
font-family: Tenar Sans;
font-size: 0.8em;
}
.hover {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.hover:before {
content: "";
position: absolute;
width: 100%;
height: 1px;
bottom: 0;
left: 0;
background-color: rgb(192, 192, 192);
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.hover:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
#logo_Claire {
height: auto;
width: auto;
max-height: 140px;
max-width: 300px;
}
Here is a Pen
I'm currently doing a school project, and I need to use Weebly to build a website.
Using Weebly's "embed code" section type, I put some code (that I stole off the internet) into the embed code area. The code is basically meant to show text whenever you hover your mouse over an image, however I'm having problems actually changing the font size. When I host it on my ide/browser, Font Size works fine, but when I host it on weebly, the font size is massive (and covers up the image. Does anyone know how to fix this?
Code here:
<!DOCTYPE html>
<html lang="en">
<style>
#import url(https://fonts.googleapis.com/css?family=Roboto:100,700;);
.snip1585 {
background-color: #000;
color: #fff;
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 18;
margin: 10px;
max-width: 315px;
min-width: 230px;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.snip1585 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.45s ease;
transition: all 0.45s ease;
}
.snip1585:before,
.snip1585:after {
background-color: rgba(0, 0, 0, 0.5);
border-top: 50px solid rgba(0, 0, 0, 0.5);
border-bottom: 50px solid rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
content: '';
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
z-index: 1;
opacity: 0;
}
.snip1585:before {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
.snip1585:after {
-webkit-transform: scaleY(2);
transform: scaleY(2);
}
.snip1585 img {
vertical-align: top;
max-width: 100%;
backface-visibility: hidden;
}
.snip1585 figcaption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: center;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.1em;
opacity: 0;
z-index: 2;
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.snip1585 h3 {
font-size: 1em;
font-weight: 400;
letter-spacing: 1px;
margin: 0;
text-transform: uppercase;
}
.snip1585 h3 span {
display: block;
font-weight: 700;
}
.snip1585 a {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 3;
}
.snip1585:hover>img,
.snip1585.hover>img {
opacity: 0.7;
}
.snip1585:hover:before,
.snip1585.hover:before,
.snip1585:hover:after,
.snip1585.hover:after {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
.snip1585:hover figcaption,
.snip1585.hover figcaption {
opacity: 1;
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
</style>
<figure class="snip1585">
<img src="http://www.applet-magic.com/unemploy.jpg" />
<figcaption>
<h3>"The first statistic for demonstrating the decline of the economy into depression is the unemployment rate"<span>Courtesy of "San Jose University"(Watkins, The Depression of the 1930's and Its Origins or Causes )</span></h3>
</figcaption>
</figure>
</html>