I'm trying to scale a box by hovering over it but doesn't seem to be working. Can I style the href to scale when hovering over?
Got the code I'm using below as well as a jsfiddle:
https://jsfiddle.net/695e7ca9/
HTML:
<div class="window">
<div class="col">
<a href="google.com" class="box">
<span class="title-label">window title </span>
<span class="content"></span>
</a>
</div>
</div>
CSS:
.col {
max-width: 50%;
}
.title-label {
display: block;
padding: 20px;
margin-bottom: 0;
color: #fff;
font-weight: 700;
background: #0176ff;
-moz-border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px;
border-radius: 4px 4px 0 0;
}
.content {
margin-top: -1px;
box-shadow: inset 0 0 0 1px #0176ff;
border-top: 0;
padding: 25px;
min-height: 235px;
display: block;
}
.window .col .box:hover {
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
-moz-box-shadow: 0 0 49px rgba(0, 0, 0, .06);
-webkit-box-shadow: 0 0 49px rgba(0, 0, 0, .06);
box-shadow: 0 0 49px rgba(0, 0, 0, .06);
}
It doesn't work because it's an <a>, an inline element.
You need to add display:block to make it work.
Also I added transition: transform 250ms to add some "smoothness" to the animation.
https://jsfiddle.net/695e7ca9/3/
Related
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>
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 4 years ago.
I'm trying to add an inner shadow to an image, but I can't get the result that I want.
Here's what I have currently:
https://codepen.io/nvision/pen/lBKEy
.shadow {
display: inline-block;
position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
}
.shadow img {
max-width: 100%;
position: relative;
z-index: -1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
The problem is this light-grey padding between the bottom of the image and the actual inner shadow. What I'd like to have is no padding at all. Just an inner shadow, and that's it.
Here's an example of what I'm trying to achieve:
Add display: block to the img elements to remove the padding below. This is because img elements are rendered inline by default. All inline-block elements has some vertical-align value by default- reset it either by applying vertical-align: top or reset the display property by applying display: block. See demo below:
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.shadow {
display: inline-block;
position: relative;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
box-shadow: rgba(0, 0, 0, 0.8) 3px 3px 10px inset;
-webkit-transition: box-shadow 0.2s ease-in;
-moz-transition: box-shadow 0.2s ease-in;
transition: box-shadow 0.2s ease-in;
}
.shadow:hover {
-moz-box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
box-shadow: rgba(0, 0, 0, 0.8) 5px 5px 55px inset;
}
.shadow img {
max-width: 100%;
position: relative;
z-index: -1;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
display: block; /* ADDED */
}
.column {
float: left;
width: 25%;
padding: 0 15px;
}
<div class="column">
<div class="shadow">
<img src="http://fillmurray.com/250/250">
</div>
</div>
<div class="column">
<div class="shadow">
<img src="http://fillmurray.com/370/370">
</div>
</div>
<div class="column">
<div class="shadow">
<img src="http://fillmurray.com/200/200">
</div>
</div>
<div class="column">
<div class="shadow">
<img src="http://fillmurray.com/400/400">
</div>
</div>
How can I turn the facebook font awesome icon into a link? Whenever I insert a link it pushes the icon out of the frame of the picture. I would like to put other social media icons beside the facebook icon aswell but at the moment I am just trying to solve the problem of getting the icon to link to facebook.
CSS
.polaroid-images a {
background: white;
display: inline;
float: left;
margin: 0 15px 70px;
padding: 10px 10px 25px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index: 0;
position: relative;
}
.polaroid-images a,
:after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top: 15px;
}
.polaroid-images img {
display: block;
width: inherit;
}
.polaroid-images a,
i:nth-child(3n) {
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.polaroid-images a:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
z-index: 10;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
}
.polaroid-images i {
position: relative;
font-size: 1em;
top: 15px;
margin-right: .5em;
color: #3b5998;
}
HTML
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet"/>
<div class="polaroid-images">
<a href="" title="Alex"><img height="200"
src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Island"
title="Alex" class=fishes /><i class="fa fa-facebook fa-3x"></i></a>
</div>
So, as of right now you have a link that is wrapping your entire card. You should probably remove this unless you want the whole card to link to Facebook. Here's what I would do:
.polaroid-images div {
background: white;
display: inline;
float: left;
margin: 0 15px 70px;
padding: 10px 10px 25px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index: 0;
position: relative;
}
.polaroid-images div,
:after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top: 15px;
}
.polaroid-images img {
display: block;
width: inherit;
}
.polaroid-images div,
i:nth-child(3n) {
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.polaroid-images div:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
z-index: 10;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
}
.polaroid-images i {
position: relative;
font-size: 1em;
top: 15px;
margin-right: .5em;
color: #3b5998;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet"/>
<div class="polaroid-images">
<div title="Alex">
<img height="200"
src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Island"
title="Alex" class=fishes />
<i class="fa fa-facebook fa-3x"></i>
</div>
</div>
Essentially, I just removed the a tag from the entire block and only wrapped it around four FB icon. Then I changed your container to a div and changed the style accordingly.
Hope this helps!
I have a requirement where I have to skew dynamic text only on the bottom, like so:
I'm not looking for actual code so much as I am a general approach, or even a gauge of feasibility.
What I've tried
So far, the only thing I've tried is floating a rounded image over the bottom of the character that's the same color as the background. This "works" for some letters without curved bottoms, like "N", but for letters like "O", this approach fails:
Is something like this possible using a combination of CSS transforms, or any other programmatic approach?
I think you need HTML5 Canvas for better results. But still i have a trick to do with just simple way:
UPDATE :
As you said you want just the bottom to get cut in a slant. I guess this is what you looking for.
body {
margin: 0px;
}
.container {
display: inline-block;
float: left;
width: 250px;
height: 250px;
font-family: impact, Calibri;
background: #E80000;
text-align: center;
overflow: hidden;
margin-right: 10px;
}
.skew {
display: block;
height: 170px;
width: 249px;
text-align: center;
font-size: 200px;
line-height: 200px;
color: white;
overflow: hidden;
}
.overlay {
position: relative;
display: block;
height: 20px;
text-align: center;
background: #E80000;
transform: skewY(-3deg);
/* Standard syntax */
margin-top: -5px;
}
<div class="container">
<div class="skew">
NO
</div>
<span class="overlay"></span>
</div>
For better understanding the trick have a look : http://jsfiddle.net/mt3d6vxh/3/
I think the only way of doing this would be a lot of jQuery/JavaScript to draw to a canvas.
This may help:
http://jsfiddle.net/joshnh/pXbVh/
html {
background: #ffe;
text-align: center;
}
.skewed {
display: inline-block;
font: 2em/1 impact, sans-serif;
margin-top: 5em;
position: relative;
-webkit-transform: rotate(-10deg) skew(-10deg, 0);
-moz-transform: rotate(-10deg) skew(-10deg, 0);
-ms-transform: rotate(-10deg) skew(-10deg, 0);
-o-transform: rotate(-10deg) skew(-10deg, 0);
transform: rotate(-10deg) skew(-10deg, 0);
}
.skewed:after,
.skewed:before {
background: #666;
box-shadow: inset 0 0 0 .5em #666,
inset 0 .7em 0 #666,
inset 0 .9em 0 #888,
inset 0 1.4em 0 #666,
inset 0 1.6em 0 #888,
inset 0 2.1em 0 #666,
inset 0 2.3em 0 #888,
inset 0 2.5em 0 #666;
content: '';
height: 3em;
position: absolute;
top: 0em;
width: 3.5em;
z-index: -1;
}
.skewed:after {
border-radius: .25em 0 0 .25em;
left: -2.5em;
}
.skewed:before {
border-radius: 0 .25em .25em 0;
right: -2.5em;
}
.skewed span {
background: #666;
box-shadow: 0 0 0 .2em #ffe;
color: #ffe;
padding: 1em;
position: relative;
text-shadow: 1px 2px 0 #666,
2px 3px 0 #888;
text-transform: uppercase;
}
Also if you want to try out the canvas route:
http://www.html5rocks.com/en/tutorials/canvas/texteffects/
I'm looking for a special CSS (3?) border effect: when applied, it looked like the corners of the objects stand out a bit more then the middle of the sides. Which produces a nice effect as if a piece of paper would be lying on the website.
How do you call this effect?
This page contains a good looking "bent paper" shadow effect, with pure CSS:
http://matthamm.com/box-shadow-curl.html
Sample code for the shadow effect on <li> element from the source above:
HTML:
<ul class="box">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS:
ul.box {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }
ul.box li {
position: relative;
float: left;
width: 250px;
height: 150px;
padding: 0;
border: 1px solid #efefef;
margin: 0 30px 30px 0;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; }
ul.box li:before,
ul.box li:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
max-height: 100px;
height: 55%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); }
ul.box li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg); }
Note: If you are using a parent element. Make sure that the parent div has position: relative; z-index: 99; or those shadows won’t show up.
You can do this with CSS3 box-shadow and transforms. E.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
div {
width: 215px;
height: 80px;
border: 1px solid #ccc;
position: relative;
background: white;
}
div::before, div::after {
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
-webkit-transform: rotate(-8deg);
transform: rotate(-8deg);
position: absolute;
left: 10px;
bottom: 12px;
z-index: -1;
width: 50%;
max-width: 100px;
height: 20px;
content: "";
}
div::after {
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
http://codepen.io/anon/pen/JuwLd
You can do this with a little trick of setting the border width to different sizes. For example:
div{
border-top: 1px solid black;
border-left: 1px solid black;
border-bottom: 2px solid black;
border-right: 2px solid black;
width: 200px;
height: 400px;
}
Example
Don't know how this is called, though.