Anyone know why not work me a link when I hover on the picture?
I added a hover effect and link stopped working :/
Anyone know how I can fix this problem?
/*** effect inner-shadow ***/
.image-home-effect {
position: relative;
}
.image-home-effect:before {
content:'';
float:left;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:20;
cursor: pointer;
margin-top: -12px;
height: 222px;
}
.image-home-effect:before {
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition:all 1s;
}
.image-home-effect:hover:before {
box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
-moz-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
-webkit-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9)
}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="content-box">
<h2>Meble biurowe</h2>
<div class="image-home-effect">
<img src="images/meble-biurowe.jpg">
</div>
</div>
</div>
Try putting your anchor tag on the outside of the div with class image-home-effect.
like this:
<a href="http://www.onet.pl/" target="_blank" class="img-inner-shadow">
<div class="image-home-effect">
<img src="images/meble-biurowe.jpg">
</div>
</a>
i am not sure but may be this help you
http://jsfiddle.net/5z4paLgr/4/
HTML
<img src="images/meble-biurowe.jpg">
CSS
.image-home-effect {
position: relative;
}
.image-home-effect:before {
content:'';
float:left;
position:absolute;
top:0;
left:0;
width:500px;
height:500px;
z-index:20;
cursor: pointer;
margin-top: -12px;
height: 222px;
}
.image-home-effect:before {
transition: all 1s;
-webkit-transition: all 1s;
-moz-transition:all 1s;
}
.image-home-effect:hover:before {
box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
-moz-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9);
-webkit-box-shadow:inset 0px 0px 120px rgba(0, 0, 0, 0.9)
}
Wrap the anchor around your div
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="content-box">
<h2>Meble biurowe</h2>
<a href="http://www.onet.pl/" target="_blank" class="img-inner-shadow">
<div class="image-home-effect">
<img src="images/meble-biurowe.jpg">
</div></a>
</div>
</div>
Related
As you can see below, I have two items with similar effect.
In the first case i use an overlay element in order to achieve the effect as you see it.
What I want is to have the same effect but with shadow not the overlay trick.
What I can't achieve is to make the shadow start 20px from top but have zero oveflow from the bottom as you see it in the first item.
Is it possible with css shadow to achieve the same thing or I have to go with the first option?
.container {
padding: 20px;
}
.item, .desired-item {
max-width: 300px;
height: 300px;
position: relative;
}
.desired-item {
padding-top: 25px;
}
figure {
width: 100%;
padding: 0;
margin: 0;
}
figure img {
width: 100%
}
.item .overlay {
position: absolute;
background-color: #ff6666;
width: 100%;
height: calc(100% - 20px);
visibility: visible;
opacity: 1;
z-index: -1;
right: -20px;
transition: all .25s;
margin-top: 20px;
}
.item figure:hover .overlay {
visibility: visible;
opacity: 0.3;
z-index: 1;
right: 0;
height: calc(100% - 0px);
margin-top: 0;
}
.desired-item figure:hover {
-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
}
.desired-item figure {
-webkit-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
box-shadow: 20px 20px 0px 0px rgba(0,0,0,0.75);
transition: all .5s;
}
<div class="container">
<h2>overlay effect:</h2>
<div class="item">
<figure>
<div class="overlay"></div>
<img src="https://via.placeholder.com/600x600.jpg/09f/fff">
</figure>
</div>
<h2>Shadow effect:</h2>
<div class="desired-item">
<figure>
<div class="overlay"></div>
<img src="https://via.placeholder.com/600x600.jpg/09f/fff">
</figure>
</div>
</div>
Apply the shadow on the image and rely on overflow to hide the non needed part:
figure img {
display:block;
box-shadow: 20px 20px 0px 0px rgba(0, 0, 0, 0.75);
transition: all .5s;
}
figure:hover img {
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.75);
}
figure {
display:inline-block;
padding-right:20px;
overflow: hidden;
}
<figure>
<img src="https://via.placeholder.com/150x150.jpg/09f/fff">
</figure>
I am building a portfolio website and I want a mockup on top of a background but when I hover over the mockup I cannot interact with the background. I want them to both scale, but the mockup should scale more than the background, therefore I need a :hover on both of them separately.
I tried fiddling around with the z-index but it did not work out. Here is what it looks like now: https://imgur.com/NPrHdAI
Here is my HTML and CSS:
.try {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 80px 0px 60px 10px;
}
.bg {
height: 250px;
margin: 10px;
border-radius: 3px;
-webkit-box-shadow: 0px 5px 10px 0px rgba(214, 214, 214, 0.3);
-moz-box-shadow: 0px 5px 10px 0px rgba(214, 214, 214, 0.3);
box-shadow: 0px 5px 10px 0px rgba(214, 214, 214, 0.3);
transition: all .3s ease-in-out;
}
.mockup {
position: absolute;
height: 300px;
transition: all .3s ease-in-out;
}
.mockup:hover {
transform: scale(1.2);
}
<div class="try">
<div>
<img class="mockup" src="img/mockup.png">
<img class="bg" src="img/bg.jpg">
</div>
<div>
<img class="mockup" src="img/mockup.png">
<img class="bg" src="img/bg.jpg">
</div>
<div>
<img class="mockup" src="img/mockup.png">
<img class="bg" src="img/bg.jpg">
</div>
</div>
I want both elements to be scaling separately, but the mockup blocks the background from scaling on hover.
You could use a wrapper div that triggers the hover, and assign different effects to mockup and bg like this:
.wrapper:hover .mockup {
transform: scale(1.2);
}
.wrapper:hover .bg {
transform: scale(5.0);
}
Full snippet: (You can see they both resize different)
.try {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: 80px 0px 60px 10px;
}
.bg {
height: 250px;
margin: 10px;
border-radius: 3px;
-webkit-box-shadow: 0px 5px 10px 0px rgba(214,214,214,0.3);
-moz-box-shadow: 0px 5px 10px 0px rgba(214,214,214,0.3);
box-shadow: 0px 5px 10px 0px rgba(214,214,214,0.3);
transition: all .3s ease-in-out;
}
.mockup {
position: absolute;
height: 300px;
transition: all .3s ease-in-out;
}
.wrapper:hover .mockup {
transform: scale(1.2);
}
.wrapper:hover .bg {
transform: scale(5.0);
}
<div class="wrapper">
<img class="mockup" src="img/mockup.png">
<img class="bg" src="img/bg.jpg">
</div>
I'm trying to have a skewed element change size on hover but for whatever reason, the elements only change whenever the mouse is about 200px below where it should be. I'm guessing this is either happening because of the way I transformed the elements or because of the way I positioned them on the page.
Code below
.layers {
margin: 150px 150px;
height: 500px !important;
width: 500px !important;
-webkit-perspective: 1000px; /* Chrome, Safari, Opera */
perspective: 1000px;
}
.layer img {
height: 500px;
width: 500px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
background: rgba(255, 255, 255, 0.65);
-webkit-transform: rotateX(75deg); /* Chrome, Safari, Opera */
transform: rotateX(75deg);
display: inline;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer:hover img {
-webkit-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
height: 510px;
width: 510px;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer1 {
display: inline-block;
position: relative;
z-index: 3;
}
.layer2 {
display: inline-block;
position: relative;
z-index: 2;
bottom: 450px;
}
.layer3 {
display: inline-block;
z-index: 1;
position: relative;
bottom: 900px;
}
<div class="layers">
<div class="layer1 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer1 -->
<div class="layer2 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer2 -->
<div class="layer3 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer3 -->
</div><!-- layers -->
Try putting the transform: rotateX(75deg); on .layer instead of its child image, like so:
.layers {
margin: 150px 150px;
height: 500px !important;
width: 500px !important;
-webkit-perspective: 1000px; /* Chrome, Safari, Opera */
perspective: 1000px;
}
.layer {
-webkit-transform: rotateX(75deg); /* Chrome, Safari, Opera */
transform: rotateX(75deg);
}
.layer img {
height: 500px;
width: 500px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
background: rgba(255, 255, 255, 0.65);
display: inline;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer:hover img {
-webkit-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
height: 510px;
width: 510px;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer1 {
display: inline-block;
position: relative;
z-index: 3;
}
.layer2 {
display: inline-block;
position: relative;
z-index: 2;
bottom: 450px;
}
.layer3 {
display: inline-block;
z-index: 1;
position: relative;
bottom: 900px;
}
<div class="layers">
<div class="layer1 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer1 -->
<div class="layer2 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer2 -->
<div class="layer3 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer3 -->
</div><!-- layers -->
Try replacing perspective: 1000px with transform: perspective(1000px)
.layers {
margin: 150px 150px;
height: 500px !important;
width: 500px !important;
//-webkit-perspective: 1000px; /* Chrome, Safari, Opera */
transform: perspective(1000px);
}
.layer img {
height: 500px;
width: 500px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
background: rgba(255, 255, 255, 0.65);
-webkit-transform: rotateX(75deg); /* Chrome, Safari, Opera */
transform: rotateX(75deg);
display: inline;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer:hover img {
-webkit-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
height: 510px;
width: 510px;
transition: all .5s;
-webkit-transition: all .5s;
}
.layer1 {
display: inline-block;
position: relative;
z-index: 3;
}
.layer2 {
display: inline-block;
position: relative;
z-index: 2;
bottom: 450px;
}
.layer3 {
display: inline-block;
z-index: 1;
position: relative;
bottom: 900px;
}
<div class="layers">
<div class="layer1 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer1 -->
<div class="layer2 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer2 -->
<div class="layer3 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer3 -->
</div><!-- layers -->
Explanation from CSS-Tricks:
[...] the perspective property doesn't affect how the element is
rendered; it simply enables a 3D-space for children elements. This is
the main difference between the transform: perspective() function and
the perspective property. The first gives element depth while the
later creates a 3D-space shared by all its transformed children.
I set images so when you click them they each reveal a different div underneath them.
I found the original code here: http://www.dynamicdrive.com/forums/showthread.php?74782-Changing-content-in-Div-upon-Link-Click
Here is my code:
#workSamples {
width:960px;
margin:auto;
}
#button1 {
width:300px;
height:236px;
display:inline-block;
float:left;
margin:0px 10px 20px 10px;
-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
}
.b1 {
width:300px;
height:236px;
overflow:hidden;
}
.b1 img {
height:auto;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-o-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}
.b1 img:hover {
margin-top: -236px;
}
#button2 {
width:300px;
height:236px;
display:inline-block;
float:left;
margin:0px 10px 0px 10px;
-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
}
#button3 {
width:300px;
height:236px;
display:inline-block;
float:left;
margin:0px 10px 0px 10px;
-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
}
#button1:focus~#content #def,
#button2:focus~#content #def,
#button3:focus~#content #def,
#button4:focus~#content #def {display:none;}
#button1:focus~#content div:nth-child(2),
#button2:focus~#content div:nth-child(3),
#button3:focus~#content div:nth-child(4),
#button4:focus~#content div:nth-child(5) {display:block;}
#content {
width:940px;
height:307px;
color:black;
font-size:10px;
text-align:center;
margin:20px auto;
-webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
overflow:hidden;
background:red;
}
.caption {
background:blue;
width:200px;
margin:auto;
height:60px;
background:#694264;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
-o-transition:all .3s ease-out;
-ms-transition:all .3s ease-out;
transition:all .3s ease-out;
left:0;
font-size:14px;
padding:10px;
}
#content:hover .caption {
-moz-transform:translateY(-100%);
-o-transform:translateY(-100%);
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
}
#faq,#her,#and,#enj {display:none;}
#faq:hover{
background:red;
}
<section class="top" data-type="background" data-speed="10" class="pages">
<section id="w">
<div class="title">My Work</div>
<div id="workSamples">
<a id="button1" href="#" tabindex="1"><div class="b1"><img src="Images/work/sample01.jpg" alt=""></div></a>
<a id="button2" href="#" tabindex="2"><div class="b1"><img src="Images/work/sample02.jpg"></div></a>
<a id="button3" href="#" tabindex="3"><div class="b1"><img src="Images/work/sample03.jpg"></div></a>
<div id="content">
<div id="def">This is where I put the default information. No clicks needed </div>
<div id="faq"><img src="Images/absolutebeauty.jpg">
<div class="caption">
<a href="http://www.absolutebeauty.ie">
<h4>Absolute Beauty</h4><br>Visit the site</a>
</div>
</div>
<div id="her"><img src="Images/bestacoustic.jpg"></div>
<div id="and"><img src="Images/engagement.jpg"></div>
</div>
</div>
</section>
</section>
The code works well on it's own but when I added it to my site it now returns me to the top of the page when I click on the first image link.
Here is my site: http://www.liddily.com
Click work and click on any of the images, you will see what I mean.
I don't know why this is happening. Can someone please help me out?
Thanks for reading!
You have your links set up to go to an anchor that isn't there so it returns the page itself. Return
make these link to an actual location and the "refresh" effect will stop.
Notice in the example on that site it shows the following code with locations after the hash # :
<div id="button1"><img src="http://img62.imageshack.us/img62/3523/p42e.png"></div>
<div id="button2"><img src="http://img16.imageshack.us/img16/3742/lnam.png"></div>
<div id="button3"><img src="http://img829.imageshack.us/img829/2347/kflq.png"></div>
<div id="button4"><img src="http://img24.imageshack.us/img24/5111/zv9.png"></div>
<div id="content"> This is where I put the default information. No clicks needed </div
<a name="FAQ">
<div style="border: 1px dashed black;width: 300px;height:500px;position:fixed;left:750px;top:150px;}
FAQ content will go here.
And then the example shows a named location for the link to travel to. you need to implement this format for it to work.
How do i center a main DIV, within which contains another div that has an inline-block.
<div class="newdiv>
<div class="pinterest-hover social-slide"></div>
<div class="instagram-hover social-slide"></div>
<div class="reddit-hover social-slide"></div>
<div class="rss-hover social-slide"></div>
</div>
CSS:
.stumbleupon-hover {
background-image: url('icons/stumbleupon-hover.png');
}
.social-slide {
height: 48px;
width: 48px;
border:3px solid;
/*margin: 10px;*/
display:inline-block;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
.social-slide:hover {
background-position: 0px -48px;
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3)
/*box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.8);*/
}
div.newdiv {
margin: 0 auto 0 auto;
}
Basically I want to center the social icons via newdiv
JSFiddle: http://jsfiddle.net/uWaPy/
Use :
div.new-div {
text-align:center;
}
You had a missing " in the div.new-div.
See updated fiddle.
IE < 8 doesn't like inline-block, there's a hack :
.social-slide {
display:inline-block;
*display:inline;
*zoom:1;
}
.newdiv
{
margin-left: auto;
margin-right: auto;
width:900px;
}
add text-align:center; to div.newdiv
Also you are missing a " in your html.
<div class="newdiv>
should be:
<div class="newdiv">
div.newdiv {
margin: 0 auto;
text-align: center;
width: 1000px;
}
just edit this code. And in your div tag, it should be <div class="newdiv">