How can I keep the black box on hover, to be only visible sliding out inside the box-1 div?
.description {
position: absolute;
background: black;
width: 100%;
height: 200px;
bottom: -100%;
visibility: hidden;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;}
.box-1:hover .description
{
visibility: visible;
bottom: 0;
}
.grid-item {
background: rgba(6, 108, 121, 0.322);
position: relative;
border: 3px solid white;
width: 100%;
height: 200px;
display: grid;
cursor: pointer;
place-items: center;
}
<div class="grid-item box-1">
<h2 class="consulting">Test</h2>
<div class="description"><p>Description</p>
</div>
You can add overflow: hidden; to your parent
.description {
position: absolute;
background: black;
width: 100%;
height: 200px;
bottom: -100%;
visibility: hidden;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.box-1:hover .description {
visibility: visible;
bottom: 0;
}
.grid-item {
background: rgba(6, 108, 121, 0.322);
position: relative;
border: 3px solid white;
width: 100%;
height: 200px;
display: grid;
cursor: pointer;
place-items: center;
overflow: hidden;
}
<div class="grid-item box-1">
<h2 class="consulting">Test</h2>
<div class="description">
<p>Description</p>
</div>
Add overflow: hidden; to the class grid-item
This will make the black box appear to slide from inside.
.description {
position: absolute;
background: black;
width: 100%;
height: 200px;
bottom: -100%;
visibility: hidden;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;}
.box-1:hover .description
{
visibility: visible;
bottom: 0;
}
.grid-item {
background: rgba(6, 108, 121, 0.322);
position: relative;
border: 3px solid white;
width: 100%;
height: 200px;
display: grid;
cursor: pointer;
place-items: center;
overflow: hidden;
}
<div class="grid-item box-1">
<h2 class="consulting">Test</h2>
<div class="description"><p>Description</p>
</div>
Related
I have a problem with my image which is inside a div.
This div with swiper__content class gives kind of bottom padding to the image and I can't see what cause this effect. I have a 100% height with no padding or margin so it might fit in the div
.no-padding{
padding: 0px 0px !important;
}
.swiper {
margin: 0 auto 50px;
width: 40%;
text-align: center;
padding: 10px 20px;
font-size: 10vw;
line-height: 1;
position: relative;
overflow: hidden;
text-transform: uppercase;
font-family: "Impact";
cursor: pointer;
}
.swiper__content {
color: transparent;
display: block;
}
.swiper .swiper__content img{
opacity: 0;
width: 100%;
height: 100%;
transition: opacity 0s ease-in 0.5s;
-moz-transition: opacity 0s ease-in 0.5s;
-webkit-transition: opacity 0s ease-in 0.5s;
-o-transition: opacity 0s ease-in 0.5s;
}
.swiper__bar, .swiper__bar--right {
width: 100%;
height: 100%;
background: orange;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.swiper__bar--right {
transform: translateX(100%);
}
.swiper.revealed .swiper__content {
animation-name: kf-font-reveal;
animation-duration: 1s;
color: orange;
}
.swiper.revealed .swiper__content img{
opacity: 1;
}
<div class="swiper no-padding revealed">
<div class="swiper__content">
<img src="http://lorempicsum.com/futurama/350/200/1">
</div>
<span class="swiper__bar--right"></span>
</div>
Is there a way to remove that ?
Set line-height: 0 for your swiper class.
.no-padding{
padding: 0px 0px !important;
}
.swiper {
margin: 0 auto 50px;
width: 40%;
text-align: center;
padding: 10px 20px;
font-size: 10vw;
line-height: 0;
position: relative;
overflow: hidden;
text-transform: uppercase;
font-family: "Impact";
cursor: pointer;
}
.swiper__content {
color: transparent;
display: block;
}
.swiper .swiper__content img{
opacity: 0;
width: 100%;
height: 100%;
transition: opacity 0s ease-in 0.5s;
-moz-transition: opacity 0s ease-in 0.5s;
-webkit-transition: opacity 0s ease-in 0.5s;
-o-transition: opacity 0s ease-in 0.5s;
}
.swiper__bar, .swiper__bar--right {
width: 100%;
height: 100%;
background: orange;
display: block;
position: absolute;
top: 0;
left: 0;
transform: translateX(-100%);
transition: 1s ease-in-out;
}
.swiper__bar--right {
transform: translateX(100%);
}
.swiper.revealed .swiper__content {
animation-name: kf-font-reveal;
animation-duration: 1s;
color: orange;
}
.swiper.revealed .swiper__content img{
opacity: 1;
}
<div class="swiper no-padding revealed">
<div class="swiper__content">
<img src="http://lorempicsum.com/futurama/350/200/1">
</div>
<span class="swiper__bar--right"></span>
</div>
So this issue has been bugging me for quite a while. I have this div container that centers an overflow image to the center.
However in Safari, the icon inside the div is not positioned in the center. Instead it is at the top. It works fine in other browsers though. Only Safari has this bug.
I attached a fiddle below. Appreciate any help! :)
JSfiddle demo
var $container = $('#page');
$container.masonry({
columnWidth: '.grid-sizer',
itemSelector: '.item',
percentPosition: true,
gutter: 10
});
#page .item {
width: calc(16.66% - 10px);
display: inline-block;
height: 0;
float: left;
padding-bottom: 16.66%;
overflow: hidden;
background-color: salmon;
margin: 5px;
position: relative;
}
#page .item.s1 {
width: calc(50% - 10px);
padding-bottom: 50%;
overflow: hidden;
background-color: navy;
}
.item > a {
/* position: relative; */
display: block;
overflow: hidden;
color: white;
}
.item:hover .grid-image:after {
background: rgba(0, 0, 0, .7);
}
.item:hover .grid-image > img {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
.item:hover .item-caption {
opacity: 1;
z-index: 3;
visibility: visible;
}
.item-caption,
.grid-image > img,
.grid-image:after {
-webkit-transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-ms-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
.item-caption {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
text-align: center;
opacity: 0;
display: table;
height: 100%;
width: 100%;
}
.item-caption > div {
display: table-cell;
height: 100%;
vertical-align: middle;
}
.grid-image {
position: relative;
overflow: hidden;
}
.grid-image img {
display: block;
overflow: hidden;
}
.grid-image:after {
position: absolute;
display: block;
content: "";
height: 100%;
width: 100%;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id="page">
<!-- GRID ITEM -->
<div class="item s1">
<a href="#">
<div class="grid-image">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4e/Pleiades_large.jpg/1024px-Pleiades_large.jpg">
</div>
<div class="item-caption">
<div>
<h5>I want this to be center</h5>
</div>
</div>
</a>
</div>
<!-- /GRID ITEM -->
</div>
</div>
</body>
</html>
So how can I place a child element above its parent ::after pseudo-element? Basically I have a div with a background image with 2 pseudo-elements: a ::before, which is an absolute-positioned full-width and height, transparent blue and a ::after, which is an inset box-shadow, and now I'm trying to place child elements above all the parent's pseudo-elements. How can I do that?
Here's a jsFiddle: http://jsfiddle.net/got3e2vb/ - I want the white circle to be placed above the parent's ::after pseudo-element. How can I do that?
z-index is enough.
Try this:
#author {
width: 100%;
height: 683px;
overflow: hidden;
background: url('images/parallax/apartment1.jpg');
position: relative;
opacity: 1;
}
#author:after {
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
box-shadow: inset 0 0 150px #072243;
content: ' ';
opacity: 0.5;
-webkit-transition: all .40s ease-out;
-moz-transition: all .40s ease-out;
-ms-transition: all .40s ease-out;
-o-transition: all .40s ease-out;
transition: all .40s ease-out;
}
#author:before {
position: absolute;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: #1a6dd3;
content: ' ';
opacity: 0.8;
}
#author:hover:after {
box-shadow: inset 0 0 250px #0f3461;
opacity: 0.9;
cursor: pointer;
}
#author-preview {
position: absolute;
border-radius: 50%;
width: 200px;
height: 200px;
background-color: #fff;
top: 0px;
left: 0px;
z-index: 3;
}
<div id="author">
<div id="author-preview">
</div>
</div>
For a more general solution to the title:
#author:first-child::before {
//etc...
}
Below is the my code
http://liveweave.com/ks0njD
html:
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
and CSS:
.container {
width: 300px;
height: 300px;
border: 1px solid black;
backface-visibility: hidden;
perspective: 1000px;
}
.box1 {
position: relative;
width: 100px;
height: 2px;
background: black;
top: 100px;
left: 200px;
transform: rotate(45deg);
transition: .5s;
backface-visibility: hidden;
perspective: 1000px;
}
.box2{
position: relative;
width: 100px;
height: 2px;
background: black;
top: 100px;
left: 200px;
transform: translateY(68px) rotate(-45deg);
backface-visibility: hidden;
transition: .5s ease;
perspective: 1000px;
}
.container:hover .box1{
transform: rotate(60deg);
transition: .8s ease;
backface-visibility: hidden;
}
.container:hover .box2 {
transform: translateY(84px) rotate(-60deg);
transition: .8s ease;
backface-visibility: hiddeni;
}
As you can see, when the divs rotate there is slight distortion, is there anyway i can make this look perfect ? i tried using backface and perspective but doesnt makes any difference.
#Amer what you mean from 'look perfect'? Something like this?
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style type="text/css">
.container {
width: 300px;
height: 300px;
border: 1px solid black;
backface-visibility: hidden;
perspective: 1000px;
}
.box1 {
position: relative;
width: 100px;
height: 15px;
background: black;
top: 112px;
left: 200px;
background:#3ac7f2;
transform: rotate(45deg);
transition: .5s;
backface-visibility: hidden;
perspective: 1000px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.box2{
position: relative;
width: 100px;
height: 15px;
background: black;
top: 93px;
left: 200px;
background:#3ac7f2;
transform: translateY(68px) rotate(-45deg);
backface-visibility: hidden;
transition: .5s ease;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.container:hover .box1{
background:#09F;
transform:background .4s ease-in-out;
transform: rotate(-45deg);
transition: .8s ease;
backface-visibility: hidden;
}
.container:hover .box2 {
background:#09F;
transform:background .4s ease-in-out;
transform: translateY(68px) rotate(45deg);
transition: .8s ease;
backface-visibility: hiddeni;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
see this codepen for a demo
EDIT of course, hard coding a width for an element is no solution. It should be just the size of the actual title.
HTML
<br/>
<nav class="navigation">
<div class="navfake"></div>
<div class="singleelement">
<div class="container">
<div class="title">Test title 2</div>
<div class="titlepicture">some picture</div>
</div>
</div>
<div class="singleelement">
<div class="container">
<div class="title">Test title newsfeed super long 1</div>
<div class="titlepicture">some picture</div>
</div>
</div>
</nav>
css
/** the newsfeed and footer */
nav {
width: 100%;
height: 20px;
position: relative;
}
.navfake {
width: 100%;
height: 100%;
background: green;
z-index: 10;
position: relative;
}
.singleelement {
display: inline-block;
height: 60px;
text-align: center;
}
.container {
position: absolute;
top: 0px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
height: 200px;
}
.titlepicture {
position: absolute;
width: 100%;
background-color: red;
z-index: 10;
height: 100px;
overflow: hidden;
}
.container:hover {
top: -80px;
}
.container:hover .titlepicture {
height: 100px;
z-index: 10;
}
.title {
z-index: 555;
position: relative;
height: 20px;
width: 100%;
}
.footer {
position: relative;
z-index: 1000;
background-color: white;
}
The trick was to replace position absolute with position relative
HTML
<nav class="navigation">
<div class="navfake"></div>
<div class="singleelement">
<div class="container">
<div class="title">Test title 2</div>
<div class="titlepicture">some picture</div>
</div>
</div>
<div class="singleelement">
<div class="container">
<div class="title">Test title newsfeed super long 1</div>
<div class="titlepicture">some picture</div>
</div>
</div>
</nav>
<div class="footer">some text blablablablablablabla
<br/>some text blablablablablablabla
<br/>some text
<br/>some text
<br/>some text
<br/>some text
<br/>some text
<br/>xxx
</div>
CSS
/** the newsfeed and footer */
nav {
width: 100%;
height: 20px;
}
.navfake {
width: 100%;
height: 100%;
background: green;
z-index: 10;
position: relative;
}
.singleelement {
display: inline-block;
height: 60px;
text-align: center;
position: relative;
}
.container {
top: -20px;
position: relative; /**changed*/
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
height: 200px;
}
.titlepicture {
position: absolute;
background-color: red;
z-index: 10;
height: 100px;
overflow: hidden;
}
.container:hover {
top: -80px;
}
.container:hover .titlepicture {
height: 100px;
z-index: 10;
}
.title {
z-index: 555;
position: relative;
height: 20px;
width: 100%;
}
.footer {
position: relative;
z-index: 1000;
background-color: white;
}
On .singleelement add some sort of width to it. For example 64px and it will work.
Fiddle: http://jsfiddle.net/7WZk5/
Perhaps this is what you're looking for: http://codepen.io/aytimothy/pen/mlkAh
Have you tried adding the "width:" CSS into your "container" Class?
.container {
position: absolute;
top: 0px;
-webkit-transition: all .8s ease;
-moz-transition: all .8s ease;
-ms-transition: all .8s ease;
-o-transition: all .8s ease;
transition: all .8s ease;
height: 200px;
width: 50%;
}
Well, 50% since you have two elements. If you want to have different widths for each of them, you could always put the width as a STYLE attribute for each element.