I think I am close, but I don't know what am missing.
I am using the same code as is on this fiddle:
http://jsfiddle.net/2tPGy/3/
HTML:
<ul class="projectGrid align">
<li id="project-1">
<a href="#">
<div class="img-overlay">
<h4>Title</h4>
<p>A description of the image</p>
</div>
</a>
</li>
</ul>
CSS:
.projectGrid li {
display: inline-block;
margin: 0 20px 20px;
box-shadow: 0px 0px 8px rgba(0,0,0,0.2);
opacity:0.7;
border-radius: 11px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
text-indent: -9000px;
-webkit-transition: box-shadow .25s ease-in-out, opacity .25s ease-in-out;
-moz-transition: box-shadow .25s ease-in-out, opacity .25s ease-in-out;
-o-transition: box-shadow .25s ease-in-out, opacity .25s ease-in-out;
-ms-transition: box-shadow .25s ease-in-out, opacity .25s ease-in-out;
transition: box-shadow .25s ease-in-out, opacity .25s ease-in-out;
}
.projectGrid li a {
display: block;
width: 280px;
height: 280px;
background-color: grey;
border: solid;
border-radius: 11px;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
} .projectGrid li:hover {
box-shadow: 0px 0px 8px rgba(0,0,0,0.7);
opacity:1.0;
}
#project-1 {
height:286px;
overflow:hidden;
position:relative;
width:286px;
}
.img-overlay {
background-color:#000;
bottom:0;
color:#fff;
opacity:0;
filter: alpha(opacity=0);
position:absolute;
width:100%;
z-index:1000;
}
#project-1:hover .img-overlay {
opacity:0.75;
filter: alpha(opacity=75);
transition:opacity 0.25s;
-moz-transition:opacity 0.25s;
-webkit-transition:opacity 0.25s;
}
#project-1 a {
background: url('../images/1.png') no-repeat scroll;
background-size: 280px 280px;
}
The code works on the fiddle, but does not work on my website.
The text in the div does not show up on my website.
Can anyone guide me as to why this might be happening?
Not only is the <ul> tag misspelled as <ui> but the <ul> wasn't closed. jsFiddle update here: http://jsfiddle.net/KwyDt/3/
<ul class="blah">
<li id="project-1">
<a href="#">
<div class="img-overlay">
<h4>Title</h4>
<p>A description of the image</p>
</div>
</a>
</li>
</ul>
Also that wrapping around a <div> is completely wrong. Was going to debug the CSS more but you might need to clarify what the final result is. As it stands this is really messy & hard to decipher. I think it works now, but I am still not sure based on the way the code is formatted.
Check out my fork of your jsFiddle. Is this what you're looking for? Basically, instead of making adjustments to the opacity, use display:none on the regular .img-overlay css, then change to display:block on :hover. Does this work on your site? I also made #Giacomo1968's suggested edits regarding your unclosed ui tag, assuming you meant ul.
Also, why is this line in here?
text-indent:-9000px;
I commented that out and everything looks great in the updated jsFiddle. Let me know if that fixes things on your end.
Related
I am working on a project for college and I am having trouble making a div change opacity from 0 to .9 when the user hovers over the div. I was wondering does the z-index affects how the hover works. I have tried the code in J Query and by using the CSS transition property and still receive the same results. NOTHING HAPPENS. Here is the code I used in CSS and HTML.
<div class="special">
<div class="spImage">
<div>
<article>Lil Wayne</article>
</div>
<img id="special1" src="image/2pc.jpg" />
<p>2pc<br>Dark<br>$1.30</p>
</div>
</div>
.spImage{
border: 2px solid grey;
background-color: black;
position: relative;
z-index: -1;
}
.spImage div{
background-color: orange;
position: absolute;
opacity: 0;
width: 250px;
height: 330px;
z-index: 0;
box-shadow: 0px 0px 5px 10px orange;
border-radius: 5px;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.spImage div:hover{
opacity: .8;
}
My overall goal is to make the div appear over the div with a class of spImage. Any help is greatly appreciated, Thanks.
z-index determines an elements stacking order, in your example, you don't necessarily need to be using z-index at all since your HTML elements are already correctly positioned for what you are trying to do.
See the below example without the z-index property - if I understand your question correctly, this should be the expected behaviour:
.spImage{
border: 2px solid grey;
background-color: black;
position: relative;
}
.spImage div{
background-color: orange;
position: absolute;
opacity: 0;
width: 250px;
height: 330px;
box-shadow: 0px 0px 5px 10px orange;
border-radius: 5px;
-o-transition: opacity .25s ease-in-out;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.spImage div:hover{
opacity: .8;
}
<div class="special">
<div class="spImage">
<div>
<article>Lil Wayne</article>
</div>
<img id="special1" src="https://i.imgur.com/Ik7I6l7b.jpg" />
<p>2pc<br>Dark<br>$1.30</p>
</div>
</div>
This question already has answers here:
How to affect other elements when one element is hovered
(9 answers)
Closed 8 years ago.
I am trying to make it so that so that a hover effect will apply for both a listed item tag and an anchor tag that it is nested in. Ideally I want it so that all the CSS is on one tag instead of split into two. I want the hover effect of the anchor tag to animate when the listed element tag is triggered. I'm assuming the solution would be to merge the styles into one but I don't know how to do it.
HTML:
<ul class="nav">
<li>
CONTACT
</li>
<li>
ABOUT
</li>
<li>
PORTFOLIO
</li>
</ul>
CSS:
body{
background: #000;
}
ul{
list-style-type:none;
display: inline-block;
}
.nav{
float:right;
list-style-type:none;
overflow: hidden;
}
.nav li{
float:right;
overflow: hidden;
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px;
margin-left: 10px;
text-align: center;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.nav li:hover{
background:#00bff3;
color:#000000;
}
.blue{
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.blue:hover{
color:#000000;
}
http://jsfiddle.net/2gbu5yrz/
It's easy enough to move the relevant styles to the links themselves (really where they should be anyhow):
http://codepen.io/pageaffairs/pen/PwNeEO
.blue{
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
display: block;
text-align: center;
padding: 8px;
}
.blue:hover{
color:#000000;
background:#00bff3;
}
Maybe this is what you are looking for: Replace .blue:hover with .nav li:hover .blue.
http://jsfiddle.net/p0ahhp5c/
The solution is to make your a use block display style:
.blue{
display: block;
color: #00bff3;
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
Try this
.nav:hover .blue:hover {
/*your code here*/
}
I've been trying to figure out why the hover image is flying from the left to bottom with transition effect even though the hover image is only set to padding-bottom. I just want the hover image to appear at the bottom of the menu when hovered.
http://jsfiddle.net/9buk14b5/1/
<header>
<div class="row">
<div class="large-12 columns">
<nav id="primary_nav">
<ul>
<li>Home</li>
<li>Work</li>
<li>Contact</li>
<li>Get a Quote</li>
<li>FAQ</li>
</ul>
</nav>
</div>
</div>
</header>
#primary_nav ul{
display: inline;
list-style-type: none;
li{
float: left;
padding: 15px 50px 15px 0;
a{
color:#ccc;
&:hover{
color:#fff;
background: url('../images/hover.png') no-repeat;
background-position: center center;
width: 22px;
height: 19px;
padding-bottom: 35px;
-webkit-transition: 0.8s all ease-out;
-o-transition: 0.8s all ease-out;
-moz-transition: 0.8s all ease-out;
transition: 0.8s all ease-out;
}
}
}
}
Use the :after pseudo-element in conjunction with :hover.
li {
position: relative;
float: left;
padding: 15px 50px 15px 0;
a {
padding-bottom: 35px;
&:after {
position: absolute;
content: '';
bottom: -3px;
left: 25%;
display:block;
margin: 0 -11px;
background: url('http://i60.tinypic.com/35a7xvs.png') no-repeat 0;
width: 22px;
height: 19px;
opacity: 0;
transition: opacity 500ms linear;
-webkit-transition: opacity 200ms linear;
-moz-transition: opacity 200ms linear;
-ms-transition: opacity 200ms linear;
-o-transition: opacity 200ms linear;
}
&:hover {
&:after {
opacity: 1;
}
}
}
}
Add the background-image to the :after pseudo element allows you to set a style to applied when its parent <a> is hovered. In this case, we set the pseudo element toopacity:0; initially and opacity:1;, then we simply set the transition-property to watch opacity.
Fade in/Fade out Examples:
Fiddle using original background image: http://jsfiddle.net/9buk14b5/8/
Fiddle using only css to create triangle: http://jsfiddle.net/9buk14b5/7/
A few things:
The odd animation behavior is fixed by tell the transition which property to animate. In your code it's set to all. Change that to padding. I've also changed the timing function to be ease-in-out.
-webkit-transition: 0.8s padding ease-in-out;
-o-transition: 0.8s padding ease-in-out;
-moz-transition: 0.8s padding ease-in-out;
transition: 0.8s padding ease-in-out;
Second, your padding-bottom amount needs to be the sum of the height of the element it is trying to go to the bottom of, and any padding, border, margin offset it may include. In your case, the magic number was 132px
padding-bottom: 132px;
Here is a working fiddle with these modifications: http://jsfiddle.net/rv9wbn8b/
Edit:
To show the arrow without any effect, simply move the padding outside of the :hover
Updated fiddle: http://jsfiddle.net/9buk14b5/4/
I have something like this "http://jsfiddle.net/sogpgepg/" that works on Chrome and on Firefox. However I noticed the offset doesn't work on Internet Explorer and the outline is outside the picture and not inside it.
After some research I found out that Explorer doesn't support outline-offset!
Is there any way I can get the same effect (inside border) on Internet Explorer?
Script:
HTML
<div id="container">
<div class="inner">
<img src="http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg"/>
</div>
</div>
CSS
#container{
width: 300px;
height: auto;
margin: 0;
padding: 0;
}
.inner img{
width: 100%;
outline: 6px solid RGBa(255,0,0, 0.5);
outline-offset: -6px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.inner img:hover {
outline: 6px solid rgba(200,200,200,0);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
Here is an alternate for IE as shown in "http://css-tricks.com/"
Code:
<div class="inner-border">
Transparent Inside Border
</div>
CSS
.inner-border {
background: #000;
color: #fff;
margin: 50px;
padding: 15px;
position: relative;
}
.inner-border:before {
border: 5px solid #000;
content: "";
position: absolute;
top: -10px;
bottom: -10px;
left: -10px;
right: -10px;
}
JSFiddle Demo of the Above Code
Here is another example of Transparent Inside Border:
http://jsfiddle.net/chriscoyier/DvaqK/4/
Hope this will help!
One possible work around is to use an inset shadow.
I modified your fiddle somewhat.
http://jsfiddle.net/sogpgepg/1/
The changes I made are:
Make the <img> a background-image on .inner.
Move all styles from .inner img up to .inner
By setting the blur radius to 0 and specifying the spread radius, you can get a hard-edge 'border'.
This link includes more information on using shadows (particularly inset shadows): http://designshack.net/articles/css/inner-shadows-in-css-images-text-and-beyond/
Code:
#container {
width: 300px;
height: auto;
margin: 0;
padding: 0;
}
.inner{
width: 300px;
height:200px;
background-image:url('http://hostingride.com/wp-content/uploads/2014/07/microsoft_xp_bliss_desktop_image-650x0.jpg');
box-shadow:inset 0px 0px 0px 6px rgba(255,0,0,0.5);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
.inner:hover {
box-shadow: inset 0px 0px 0px 6px rgba(200,200,200,0);
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
I currently have this JSfiddle.
HTML:
<div class="refTable">
<div class="refRow">
<div class="refCell"><img src="images/test.jpg" /><p>Test 1</p></div>
<div class="refSep"></div>
<div class="refCell"><img src="images/test.jpg" /><p>Test 2</p></div>
<div class="refSep"></div>
<div class="refCell"><img src="images/test.jpg" /><p>Test 3</p></div>
</div>
</div>
CSS:
.refTable {
display:table;
max-width:919px;
width:100%;
margin:0px auto;
}
.refRow {
display:table-row;
}
.refCell {
display:table-cell;
width:291px;
text-align: center;
font-size:16px;
border:1px #ffffff solid;
padding:0px 0px 10px 0px;
background:#eaeaea;
color:#333333;
-webkit-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
resize: none;
outline:0;
transition-duration: 0.2s;
}
.refCell img {
-webkit-border-radius: 20px 20px 0px 0px;
border-radius: 20px 20px 0px 0px;
padding-bottom:5px;
}
.refCell p {
line-height: 20px;
}
.refCell:hover {
border-color:#b32f01;
background:#ffffff;
-webkit-transition: color background 0.2s ease-in-out;
-moz-transition: color background 0.2s ease-in-out;
-ms-transition: color background -0.8s ease-in-out;
-o-transition: color background 0.2s ease-in-out;
transition: color background 0.2s ease-in-out;
cursor:pointer;
color:#cacaca;
}
.refCell:hover img {
opacity:0.4;
-webkit-transition: opacity 0.2s ease-in-out;
-moz-transition: opacity 0.2s ease-in-out;
-ms-transition: opacity -0.8s ease-in-out;
-o-transition: opacity 0.2s ease-in-out;
transition: opacity 0.2s ease-in-out;
}
.refSep {
display:table-cell;
width:20px;
}
In the fiddle, no images display in the boxes. However, there normally would be. On hover, the boxes change background color, font color, and, provided there is an image, image opacity. That's fine.
Now, I would like to make it so that, on hover, an image or div "slides" up from the bottom/side/top that says "Visit this website", possibly with some sort of icon.
What is the best approach? I've really been thinking about it, but I can't come up with a solution.
I did this with just css :hover and css3 transitions.
This is the css I wrote,
.info {
position: absolute;
top: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.4);
text-align: center;
-webkit-transition: top 0.6s ease-in-out;
left: 0;
color: #f7f7f7;
text-decoration: none;
}
.refCell:hover .info {
top: 0;
display: block;
}
I also added this to the .refCell class,
position: relative;
overflow: hidden;
The html I added,
<span class="info">Click to view website</span>
Here is the JSFIDDLE to see how it works.