I've built a block section on my website, what I'd like to do is when the user hovers over the block, the block-caption fades in over the top.
Currently there's no effect, it just jumps.
See this fiddle for current code
How do I do this?
Code:
.blocks {
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
}
.blocks [class*=col] {
padding: 1px;
}
.blocks .block {
background: #979797;
display: block;
margin: 0 auto;
overflow: hidden;
position: relative;
height: 350px;
}
.blocks .block h3 {
color: #ffffff;
font-size: 2.5em;
text-align: center;
margin-top: 8px;
}
.blocks .block .block-title {
position: absolute;
text-align: center;
top: 40%;
width: 100%;
display: block;
}
.blocks .block img {
opacity: .4;
display: block;
height: 350px;
margin: 0 auto;
width: 100%;
}
.blocks .block .block-caption {
background: #394074;
top: 0;
width: 100%;
height: 100%;
color: #ffffff;
display: block;
left: 0;
opacity: 0;
padding: 20px 0;
position: absolute;
text-align: center;
}
.blocks .block .block-caption a {
display: inline-block;
border: 2px solid #ffffff;
padding: 20px 30px;
font-weight: bold;
text-transform: uppercase;
color: #ffffff;
font-size: 1.2em;
margin-top: 1em;
}
.blocks .block .block-caption a:hover {
text-decoration: none;
}
.blocks .block .block-caption p {
margin-top: 1em;
margin-bottom: 1em;
display: block;
font-size: 1.4em;
color: #ffffff;
}
.blocks .block:hover .block-caption {
opacity: 1;
}
.blocks .block:hover img {
opacity: 0.2;
}
<div class="blocks">
<div class="block">
<div class="block-title">
<h3>Online GP <br> Service</h3>
</div>
<!-- /.block-title -->
<img alt="Training" src="https://placeholdit.imgix.net/~text?txtsize=75&txt=640%C3%97480&w=640&h=480">
<div class="block-caption">
<h3>Online GP <br> Service</h3>
<p>Sed ut perspiciatis unde omnis iste natus
<br>voluptatem accusantium doloremque</p>
Find Out More
</div>
<!-- /.block-caption -->
</div>
</div>
Here's a working fiddle with what (I think it is) you want:
https://jsfiddle.net/utrgtech/2/
You can add:
-webkit-transition: opacity ease-out 1s;
-moz-transition: opacity ease-out 1s;
-o-transition: opacity ease-out 1s;
transition: opacity ease-out 1s;
For example. It enables compatibility throughout all browsers.
Here's documentation: https://css-tricks.com/almanac/properties/t/transition/
Just give
.block-caption {
transition:2s all;
-webkit-transition:2s all;
-ms-transition:2s all;
}
Working Fiddle
Please use transition: all linear .3s; on .blocks .block .block-caption I have use fade effect for this caption. Check this fiddle https://jsfiddle.net/utrgtech/3/
you to ad to your .block this
.blocks .block .block-caption{
transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out; // mozilla brower
-o-transition: all 1s ease-in-out; // opera brower
}
put animation: fadeIn .6s ease-in 1 forwards; in .blocks .block:hover .block-caption
.blocks .block:hover .block-caption {
opacity: 0;
animation: fadeIn .6s ease-in 1 forwards;
}
#keyframes fadeIn {
to {opacity: 1}
}
Related
I have a dropdown navigation system on my website, and it works fine, but I noticed that when I hovered below the dropdown text it would display the dropdown anyway. (jsfiddle of before) I wanted to change that, so I tried changing #dropdown:hover #dropdown-content to #dropdown p:hover #dropdown-content. But I am not getting any results.
#nav-container {
display: table;
margin: 0 auto;
}
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #D3D3D3;
position: sticky;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
#group1 {
display: inline-block;
}
#dropdown {
display: inline-block;
position: relative;
text-align: center;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
margin: auto auto auto auto;
}
#dropdown-content {
position: absolute;
margin: 10px auto auto auto;
left: 0;
right: 0;
opacity: 0;
height: auto;
background-color: #575757;
border-radius: 8px;
box-shadow: 0px 0px 6px 0px #D3D3D3;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#dropdown-content img {
margin-bottom: 5px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.nav-dropdown-container {width: 400px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown p:hover #dropdown-content { /* CHANGES HERE */
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
<nav id="navigation">
<div id="nav-container">
<center>
<ul id="nav-items">
<li>
<div id="group1">
<div class="nav-dropdown-container">
<div id="dropdown">
<p>Test</p>
<div id="dropdown-content">
<p>Test</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</center>
</div>
</nav>
I have tried everything, from putting the p element in it's own div to putting the p element in the ul element. Any help would be appreciated.
You should use this CSS selector #dropdown>p:hover ~ #dropdown-content :
#nav-container {
display: table;
margin: 0 auto;
}
#navigation {
height: 100px;
padding: 10px 3px 3px;
background-color: #D3D3D3;
position: sticky;
}
#nav-items {
list-style-type: none;
margin-left: -45px;
}
#nav-items li {
display: inline-block;
vertical-align: top;
width: 400px;
}
#group1 {
display: inline-block;
}
#dropdown {
display: inline-block;
position: relative;
text-align: center;
}
#dropdown p {
font-family: 'Work Sans', sans-serif;
font-size: 35px;
letter-spacing: 5px;
margin: auto auto auto auto;
}
#dropdown-content {
position: absolute;
margin: 10px auto auto auto;
left: 0;
right: 0;
opacity: 0;
height: auto;
background-color: #575757;
border-radius: 8px;
box-shadow: 0px 0px 6px 0px #D3D3D3;
z-index: 1;
overflow-y: hidden;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#dropdown-content img {
margin-bottom: 5px;
user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.nav-dropdown-container {width: 400px;}
#dropdown-content p {
font-size: 20px;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
letter-spacing: 2px;
}
#dropdown>p:hover ~ #dropdown-content {
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#dropdown:hover #dropdown-content {
display: block;
}
<nav id="navigation">
<div id="nav-container">
<center>
<ul id="nav-items">
<li>
<div id="group1">
<div class="nav-dropdown-container">
<div id="dropdown">
<p>Test</p>
<div id="dropdown-content">
<p>Test</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</center>
</div>
</nav>
Add this in your css selector : ~
it's going to be like that now:
#dropdown p:hover ~ #dropdown-content { /* CHANGES HERE */
opacity: 1;
max-height: 500px;
padding-top: 1em;
padding-bottom: 1em;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
display: block;
}
I'm having trouble using the ease function in CSS.
I have an image and when you hover over it I want it to ease to get bigger and show another div.
<div class="info1">
<img src="info.png">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
</div>
The CSS
.infoh {
width: 180px;
height: 180px;
display: none;
position: absolute;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
z-index: 1;
margin-left: -80px;
margin-top: -33px;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover .infoh {
display: block;
}
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
margin-left: 19.5%;
margin-top: -1.5%
}
I tried placing it on the image but that didn't work, then I tried on each div, and couldn't get it to ease. It just pops up.
.info1 img {
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
I'm not exactly sure of the effect you're after, but as #Paulie_D said, you're probably looking at using visibility and opacity.
Here's some code to try out, and at least that should give you something to work with.
(I also changed the order of your HTML a bit)
.info1 {
position: absolute;
display: inline-block;
width: 32px;
height: 32px;
}
.info1 img {
width: 32px;
height: 32px;
-webkit-transition: all 2s; /* Safari */
transition: all 2s;
transition-timing-function: ease;
-webkit-transition-timing-function: ease;
}
.infoh {
position: absolute;
visibility: hidden;
opacity: 0;
z-index: 1;
width: 180px;
height: 180px;
background-color: #ffb534;
padding: 30px;
border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border: 4px solid #ffffff;
-webkit-transition: all 1s; /*Safari*/
transition: all 1s;
}
.infoh p {
font-size: inherit;
text-align: center;
}
.info1:hover img {
width: 300px;
height: 300px;
}
.info1:hover .infoh {
visibility: visible;
opacity: 1;
-webkit-transition-delay: 1s; /*Safari*/
transition-delay: 1s;
}
<div class="info1">
<div class="infoh">
<p>Information to be shown when hovered over</p>
</div>
<img src="https://unsplash.it/300/300">
</div>
Hope this helps, and good luck!
I'm trying to edit a link with icon to fade between colors. I'm using :before for background image which is a sprite, because I couldn't figure how to change the color of the icon using only css when it's only png file.
I found this post which might be an answer( CSS3 - Fade between 'background-position' of a sprite image) and tried to modify it to my needs but it's not working...
Here's the code and the codepen demo in action (http://codepen.io/kikibres/pen/KpjZKM):
HTML
<div id="button">Button</div>
CSS
#button{
display: block;
}
#button a {
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #121e34;
text-decoration: none;
vertical-align: middle;
display: inline-block;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a:before {
content: "";
display: inline-block;
vertical-align: middle;
/*float: left;*/
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 0px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;
}
#button a:hover:before{
content: "";
background-image: url('http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png');
background-position: 0 -29px;
background-repeat: no-repeat;
width: 30px;
height: 30px;
display: inline-block;
/*text-indent: -9999px;*/
/*transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
-o-transition: opacity 0.4s ease-in-out;*/
opacity: 0;
}
/*#button a:hover:before
{
opacity: 0.4;
}*/
How do I fix it so that it'll fade from one color to another...
* Update *
With some help from others (thanks, everyone!), I was able to edit the code. However, it doesn't line up in the middle like I wanted. Here's the actual link that I'm using for a website. The first code displayed was just an example to see how I can make it work. Anyway, I finally separated the icon and the text by using span, but now I'm trying to tie them together by using "+" in the css, but it's not working. Here's the codepen code: http://codepen.io/kikibres/pen/GJbQKq
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
/*text-indent: 80px;*/
/*width: 100%;
height: 52px;*/
/*background: url(http://i.imgur.com/32k8ugR.png) no-repeat;*/
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a:hover {
color: #f68e07;
}
#button a span {
position: relative;
display: inline-block;
/*top: 0; left: 0; bottom: 0; right: 0;*/
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
/*display: inline-block;*/
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button a span:hover:before {
opacity: 1;
}
As you can see from this new codepen code, if you hover over the icon, both the icon and the text work, but if you hover over the text, only the text works. How do I fix it?
You've to apply the different image styles on different DOM elements, once it's the anchor tag and the second one is the span (in my example), and then switch the opacity of the different positioned background. CodePen Link
SNIPPET
.button {
display: inline-block;
position: relative;
text-indent: 30px;
width: 36px;
height: 30px;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
text-decoration: none;
font-size: 1.5em;
transition: color 0.4s ease;
line-height:1.5em;
}
.button:hover{
color:#f68e07;
}
.button span {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://www.dagrafixdesigns.com/Templates/DA-2011/DA-2013/Nike_13/img/mobile.png) no-repeat;
background-position: 0 -29px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
.button:hover span {
opacity: 1;
}
Button<span></span>
To change the color, you can incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
You have declared opacity: 0; for #button a:hover:before { ... }, that's why it doesn't work in your codepen demo.
I got it!!! Thanks everyone for their help! I was able to make it work!!!
Here's working codepen: http://codepen.io/kikibres/pen/LVKQxE
HTML
<div id="button"><span></span>Free Consultation</div>
CSS
body {
background-color: #121e34;
}
#button{
display: block;
width: 100%;
}
#button a {
display: inline-block;
position: relative;
text-decoration: none;
text-transform: uppercase;
font-size: 30px;
font-weight: 700;
letter-spacing: 1;
color: #fff;
vertical-align: middle;
transition: color 0.4s ease;
}
#button a span {
position: relative;
display: inline-block;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
width: 66px;
height: 52px;
margin-right: 15px;
vertical-align: middle;
}
#button a span:before {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: url(http://i.imgur.com/32k8ugR.png) no-repeat;
background-position: 0 -52px;
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
}
#button:hover a {
color: #f68e07;
}
#button:hover a span:before {
opacity: 1;
}
the problem is in code have 2 div, when mouse go to first div background color is change and when go to second div both background color is change now i want when go to first div both background color is change!
.aboutboth {
width: 370px;
margin: 0 auto;
}
.about-mohamad {
margin: 0 auto;
width: 170px;
height: 230px;
background: #666666;
float: left;
text-align: center;
margin-right: 30px;
-webkit-transition: all .5s linear ;
-moz-transition: all .5s linear ;
-o-transition: all .5s linear ;
transition: all .5s linear ;
position: relative;
}
.about-mohamad:hover {
background: #e9e9e9;
}
.about-mohamad div {
margin: 0 auto;
width: 150px;
height: 150px;
background: white;
margin-top: 10px;
margin-bottom: 25px;
-webkit-transition: all .5s linear ;
-moz-transition: all .5s linear ;
-o-transition: all .5s linear ;
transition: all .5s linear ;
}
.about-mohamad div:hover {
background: #2d3030;
}
.about-mohamad span {
display: inline;
font-size: 13px;
display: inline-block;
color: white;
}
.about-mohamad p {
font-size: 10px;
}
.about-mohamad div img {
margin-top: 25px;
}
.about-mohamad span#abouthovera {
display:inline;
text-transform: uppercase;
font-size: 10px;
}
.about-mohamad:hover span#abouthovera {
display:none;
}
.about-mohamad span#abouthoverb {
display:none;
}
.about-mohamad:hover span#abouthoverb {
display:inline;
color: #666666;
text-transform: uppercase;
font-size: 10px;
}
<div class="aboutboth">
<div class="about-mohamad">
<div><img src="http://rezaaria.com/1.png"></div>
<span id="abouthovera">job</span>
<span id="abouthoverb">name</span>
</div>
</div>
You have to target first <div> hover to change both backgrounds.
.aboutboth {
width: 370px;
margin: 0 auto;
}
.about-mohamad {
margin: 0 auto;
width: 170px;
height: 230px;
background: #666666;
float: left;
text-align: center;
margin-right: 30px;
-webkit-transition: all .5s linear ;
-moz-transition: all .5s linear ;
-o-transition: all .5s linear ;
transition: all .5s linear ;
position: relative;
}
.about-mohamad:hover {
background: #e9e9e9;
}
.about-mohamad div {
margin: 0 auto;
width: 150px;
height: 150px;
background: white;
margin-top: 10px;
margin-bottom: 25px;
-webkit-transition: all .5s linear ;
-moz-transition: all .5s linear ;
-o-transition: all .5s linear ;
transition: all .5s linear ;
}
.about-mohamad:hover div {
background: #2d3030;
}
.about-mohamad span {
display: inline;
font-size: 13px;
display: inline-block;
color: white;
}
.about-mohamad p {
font-size: 10px;
}
.about-mohamad div img {
margin-top: 25px;
}
.about-mohamad span#abouthovera {
display:inline;
text-transform: uppercase;
font-size: 10px;
}
.about-mohamad:hover span#abouthovera {
display:none;
}
.about-mohamad span#abouthoverb {
display:none;
}
.about-mohamad:hover span#abouthoverb {
display:inline;
color: #666666;
text-transform: uppercase;
font-size: 10px;
}
<div class="aboutboth">
<div class="about-mohamad">
<div><img src="http://rezaaria.com/1.png"></div>
<span id="abouthovera">job</span>
<span id="abouthoverb">name</span>
</div>
</div>
.aboutboth:hover {
background: #e9e9e9;
}
or
.aboutboth:hover ~ .about-reza {
background: #ccc
}
.aboutboth:hover {
background: #ccc}
try this
You can see what i have tried to do. But I want the bottom of each image rollover to appear after the right pops up and fades in. Not just when the mouse is hovered over the bottom of each image.
I'm also having trouble making the whole thing clickable to a blog post without overshadowing/stopping the individual links, and short code selection from being workable.
I've been at this for days with no luck... (The social icons, will be individual links but I've not done that yet)
Anyone see where I'm going wrong? I've got a fiddle at bottom. Ideally I'd like for it to all play on hover but obviously delay the black box at the bottom. I'm so close its annoyingly annoying.
HTML:
<body>
<div class="wrapper">
<div class="container left">
<img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/suit6.jpg" alt="image" />
<div class="sig"></div>
<div class="innercontent css3-2">
<span class="css3-2 resize"><br/><h2>Title of the blog Post</h2>
<p>April 29, 2014</p>
<p><img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/share-buttons1-e1399999305264.png" /></p>
<p class="url"><textarea spellcheck="false">http://shortcodegoeshere.com/334</textarea></p>
<p>3/4 length • Agnelli check • bespoke jacket • Jacket • London Lounge</p><span class="clickhere">Click here to read this article</span></span>
</div>
</div><!-- .container -->
<div class="container right">
<img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/suittemp.jpg" alt="image" />
<div class="sig"></div>
<div class="innercontent css3-2">
<span class="css3-2 resize"><br/><h2>Title of the blog Post</h2>
<p>April 29, 2014</p>
<p><img src="http://www.glennleader.co.uk/wp-content/uploads/2014/05/share-buttons1-e1399999305264.png" /></p>
<p class="url"><textarea spellcheck="false">http://shortcodegoeshere.com/334</textarea></p>
<p>3/4 length • Agnelli check • bespoke jacket • Jacket • London Lounge</p><span class="clickhere">Click here to read this article</<span></span>
</div>
</div><!-- .container -->
</footer>
</div><!-- .wrapper -->
</body>
CSS:
*{margin:0;padding:0;}
img {margin:0;padding:0px;}
.wrapper{
margin:0 auto;
width:720px;
padding:30px;
position:relative;
}
.left {float:left;}
.right {float:right;}
p {
color:#000;
font-size:14px;
margin-bottom: 12px;
}
a{
text-decoration:none;
color: #000
}
h2, h2 a { font-size: 20px;
color: #000;
line-height: 30px;
}
h2 a:hover, a:hover {
color:#F3625F;
}
.container{
position:relative;
overflow:hidden;
width: 300px;
max-height: 100%;
}
.sig {
display: block;
width: 98%;
height: 98%;
background: url(http://www.glennleader.co.uk/wp-content/uploads/2014/05/signature.png) bottom right no-repeat ;
top: 0;
left: 0;
position:absolute;
overflow: hidden;
}
.resize {
width: 95%;
height: 100%;
position: absolute;
display: block;
overflow: hidden;
padding: 0 2.5%;
top: 0;
left: 0;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
transition: all .2s ease-out;
opacity: 0;
}
.resize:hover {
opacity: 1;
}
.clickhere {
position: absolute;
display: block;
overflow: hidden;
width: 300px;
height: 20px;
padding: 15px 0;
text-align: center;
bottom: 0;
left: 0;
background: #000;
opacity: 0;
-webkit-transition: all .3s ease-in;
-moz-transition: all .3s ease-in;
transition: all .3s ease-in;
animation-delay:2s;
-webkit-animation-delay:2s;
-moz-animation-delay:2s;
}
.clickhere:hover a {
display: block;
color: #fff;
font-weight: 800;
}
.clickhere:hover {
opacity: 0.5;
cursor: pointer;
}
.clickhere a:hover {
color:#F3625F
}
.url textarea {
width: 100%;
border: 0 none transparent;
margin: 0;
padding: 0;
outline: 0;
resize: none;
overflow: hidden;
font-family: inherit;
background: 0;
text-align: center;
font-size: 12px;
height: 16px;
-webkit-appearance: textarea;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
flex-direction: column;
cursor: auto;
white-space: pre-wrap;
word-wrap: break-word;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
-webkit-writing-mode: horizontal-tb;
background: transparent;
}
.innercontent {
display: block;
height: 100%;
text-align: center;
width:100%;
background:rgba(255,255,255,0.7);
position:absolute;
}
.css3-2:hover .resize {
}
.css3-2 {
bottom:-370px;left:0;
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.innercontent a.css3-2{
-webkit-transition: all .5s ease-out;
-moz-transition: all .5s ease-out;
-o-transition: all .5s ease-out;
transition: all .5s ease-out;
}
.container:hover .css3-2 {
bottom:4px;
cursor: pointer;
}
Fiddle:
http://jsfiddle.net/Veriix/euXGZ/
The first issue is solved easy... you need to add the ::hover-pseudo class to the parent element to change the styles properly.
.css3-2:hover .clickhere a, .clickhere:hover a {
display: block;
color: #fff;
font-weight: 800;
}
.css3-2:hover .clickhere, .clickhere:hover {
opacity: 0.5;
cursor: pointer;
}
.css3-2 .clickhere a:hover, .clickhere a:hover {
color:#F3625F
}
Updated Fiddle:
http://jsfiddle.net/euXGZ/5/
(I did not make any animation changes, just an update on the issue of displaying the link onhover)
EDIT: If you don't want the clickable element to slide in, give it an absolute positioning and maybe add some different animation (including a delay if you want it to wait til the slide in is done!)
animation-delay:2s;
-webkit-animation-delay:2s; /* Safari and Chrome */
https://www.facebook.com/j.beargraphics