So I am just starting out in FE and found a really cool parralex animation via CSS that I have applied to my site.
I am happy with the desktop, but on mobile I lose the text boxes for some of the slides.
I tried to add the #media to specify changes for mobile screen sizes, and it works ok on Pixel 3, but on Iphone it is still cutting off. I suspect it is something to do with the overflow - but I cannot seem to fix it. I have tried a couple if things, I am not starting to think I just need to do a mobile style sheet. As I am new to the game I thought I would post on here to see if there is a quick fix!
Thanks,
D
<html>
<head>
<title></title>
<style>
html {
height: 100%;
overflow: hidden;
}
body {
margin:0;
padding:0;
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
font-family: 'Lora', serif;
}
h1 {
font-size: 250%
}
p {
font-size: 140%;
line-height: 150%;
color: #333;
}
.slide {
position: relative;
padding: 25vh 10%;
min-height: 100vh;
width: 100vw;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
transform-style: inherit;
color: #fff;
text-shadow: 0 5px 5px #808080;
}
img {
position: absolute;
top: 50%;
left: 35%;
width: 320px;
height: 240px;
transform: translateZ(.25px) scale(.75) translateX(-94%) translateY(-100%) rotate(2deg);
padding: 10px;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
img:last-of-type {
transform: translateZ(.4px) scale(.6) translateX(-104%) translateY(-40%) rotate(-5deg);
}
.slide:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7);
}
.title {
width: 50%;
padding: 3%;
border-radius: 5px;
background: rgba(240,230,220, .7);
box-shadow: 0 0 8px rgba(0, 0, 0, .7);
}
.slide:nth-child(2n) .title {
margin-left: 0;
margin-right: auto;
}
.slide:nth-child(2n+1) .title {
margin-left: auto;
margin-right: 0;
}
.slide, .slide:before {
background: 50% 50% / cover;
}
.header {
text-align: center;
font-size: 175%;
color: #fff;
text-shadow: 0 5px 5px #008000;
}
#title {
background-image: url("code1.jpg");
z-index:2;
}
#title h1 {
transform: translateZ(.25px) scale(.75);
transform-origin: 50% 100%;
color: #fff;
text-shadow: 0 5px 5px #008000;
}
#slide1:before {
background-image: url("code2.jpg");
transform: translateZ(-1px) scale(2);
}
#slide2 {
background-image: url("code3.jpg");
z-index:2;
}
#slide3:before {
background-image: url("dark.jpg");
transform: translateZ(-1px) scale(2);
}
#slide4 {
background: #222;
}
#media screen and (max-width: 1020px) {
#title, #slide1, #slide2, #slide3, #slide4 {
float: none;
width: auto;
overflow-y: scroll;
overflow-x: scroll;
}
}
</style>
</head>
<body>
<div id="title" class="slide header">
<h1>
</h1>
</div>
<div id="slide1" class="slide">
<div class="title">
<h1>About me</h1>
<p></p>
</div>
</div>
<div id="slide2" class="slide">
<div class="title">
<h1>Skill set</h1>
<p></p>
</div>
<img src="code1.jpg">
<img src="hype.jpg">
</div>
<div id="slide3" class="slide">
<div class="title">
<h1>Why choose me?</h1>
<p></p>
</div>
</div>
<div id="slide4" class="slide header">
<h1></h1>
<p></p>
</div>
</body>
</html>
You can set z-index for the title, and remember to set position to z-index work well
#media screen and (max-width: 1020px) {
.slide .title {
position: relative;
z-index: 5;
}
}
Related
I have a problem that my transition does not get applied on an absolute positon child div.
Here is my codepen:
https://codepen.io/Data-Mastery/pen/oNvRdGv
On line 213 (&:hover .image) in the SASS file I want to scale the image and also set a filter, which works fine, but the transition-duration does not get applied.
If I just apply the hover statement on the parent element and not the image, the transition works fine. What is wrong here, can anyone help me?
Just add a transition to the .image class (or to the hover function, whatever you want to achieve)
&:hover .image {
transform: scale(1.1);
filter: grayscale(50%);
transition: your parameter;
}
Add transition property to the
& .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-bottom: 1.5rem;
transition:0.5s;
}
This will work for you
Why man , it works see this:-
#import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
#keyframes moveInLeft {
0% {
transform: translateX(-200px);
opacity: 0;
}
80% {
transform: translateX(10px);
opacity: 0.8;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
#keyframes moveInRight {
0% {
transform: translateX(200px);
opacity: 0;
}
80% {
transform: translateX(-10px);
opacity: 0.8;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
#keyframes moveInBottom {
0% {
transform: translateY(100px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.leftanimation {
animation: moveInLeft 1.2s forwards;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
line-height: 1.4rem;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
p {
margin: 0.75rem;
}
.l-heading-light {
font-size: 3rem;
color: white;
padding-top: 3rem;
padding-bottom: 1rem;
}
.l-heading-dark {
font-size: 3rem;
color: #c2453b;
padding-top: 3rem;
padding-bottom: 1rem;
}
.primary-btn {
display: inline-block;
background: #c2453b;
color: #fff;
padding: 0.5rem 2rem;
font-size: 1.25rem;
border-radius: 20px;
transition: all 0.3s ease-in;
}
.primary-btn:hover {
background: #fff;
color: #c2453b;
transform: translateY(-3px);
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}
.primary-btn:active {
transform: translateY(-1px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.navbar {
display: flex;
z-index: 1;
justify-content: space-between;
align-items: center;
width: 100%;
position: fixed;
top: 0;
padding: 1rem;
background: #333;
color: #fff;
}
.navbar__nav {
display: flex;
justify-content: space-between;
}
.navbar__nav li a {
color: #fff;
padding: 0.75rem;
margin: 0 0.25rem;
}
.navbar__nav li a:hover {
background: #fff;
border-radius: 5px;
color: #333;
}
.showcase {
background-image: linear-gradient(to bottom right, rgba(194, 69, 59, 0.4), rgba(178, 86, 65, 0.4)), url("https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg");
background-size: cover;
background-position: top;
height: 100vh;
position: relative;
}
.showcase__content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
text-transform: uppercase;
}
.showcase__content p {
color: white;
font-size: 1.2rem;
margin-bottom: 1rem;
animation: moveInRight 1.2s forwards;
}
.showcase__content a {
animation: moveInBottom 1.2s 0.8s linear backwards;
}
#tours {
text-align: center;
background: #f7f7f7;
}
#tours .container {
width: 100%;
height: 100%;
margin: 0 auto;
display: block;
max-width: 1200px;
justify-content: space-between;
display: flex;
color: #fff;
}
#tours .container .card {
position: relative;
height: 35rem;
width: 20rem;
margin: 2rem 1rem;
padding: 0;
background: #b25641;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
transition: all 0.4s ease-in-out;
overflow: hidden;
}
#tours .container .card:hover .image {
transform: scale(1.1);
filter: grayscale(100%);
transition-duration: 0.5s;
}
#tours .container .card .image {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-bottom: 1.5rem;
}
#tours .container .card__content {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 15rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/style.css" />
<title>Malamar Hotels</title>
</head>
<body>
<nav class="navbar">
<h1 class="navbar__logo">
Malamar
</h1>
<ul class="navbar__nav">
<li>Home</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</nav>
<header class="showcase">
<div class="showcase__content">
<h1 class="l-heading-light leftanimation">
Hiking this fall
</h1>
<p>
Book the best hikings tours for this fall in beautiful areas across
europe
</p>
See our tours
</div>
</header>
<section id="tours">
<h1 class="l-heading-dark">Our best offers</h1>
<div class="container">
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Hiking</h1>
<p>2-day tour</p>
Book now!
</div>
</div>
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Rafting tour</h1>
<p>3-day tour</p>
Book now!
</div>
</div>
<div class="card">
<img src="https://thumbs.dreamstime.com/z/hiking-forest-man-morning-mist-travel-concept-45457025.jpg" alt="Hi" class="image" />
<div class="card__content">
<h1>Mountainbiking</h1>
<p>5-day tour</p>
Book now!
</div>
</div>
</div>
</section>
</body>
</html>
Current Situation Image
Here is what I have got. But I want that rectangle facebook image behind the red region (currently it is just behind the text 'Please')
#mlnk{
text-decoration:none;
position:relative;
top:40%;
left:0%;
color: #b5c5d6;
}
.container-corner-img{ /* **THIS IS TO BE PUSHED BACK** */
height: 40%; width: 70%;
position: absolute;
top: 5px; left:-75px;
}
.container{
width:50%;
height:30%;
background: linear-gradient(#8B9DC1, #3b5998);
padding:100px;
border-radius:12px;
position: relative;
font-family: sans-serif;
}
h1{ /* **THIS NEEDS TO BE BROUGHT TO FRONT** */
margin-left: auto;
margin-right: auto;
padding: 8px;
border-radius: 4px;
box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
transition: 0.4s ease;
background-color: red;
margin-top: 0;
}
img{
height: 80%;
width: 50%;
}
<div class="container">
<div class="container-corner-img">
<img src="fbminimal.png">
</div>
<h1>
<a id="mlnk" href = "#link"> Please login to your facebook account first</a>
</h1>
</div>
I have commented the css definitions in CAPS that needs to be focused according to me.
To bring the heading to the front, you have to set z-index to a larger value. To be able to use z-index on an element it needs to have a different position than static. So use relative. Moreover, do not use the center-tag since it is deprecated. The layout should be controlled by CSS only.
#mlnk {
text-decoration: none;
position: relative;
top: 40%;
left: 0%;
color: #b5c5d6;
}
h3 {
color: midnightblue;
padding: 4px;
box-shadow: 0 2px 4px 0 #38434e;
background: #3c64ad;
}
.container-corner-img {
/* **THIS IS TO BE PUSHED BACK** */
height: 40%;
width: 70%;
position: absolute;
top: 5px;
left: -75px;
/* opacity: 0.4; */
}
.container {
width: 50%;
height: 30%;
background: linear-gradient(#8B9DC1, #3b5998);
padding: 100px;
border-radius: 12px;
position: relative;
font-family: sans-serif;
/* z-index: 1; */
margin: 0 auto;
}
h1 {
/* **THIS NEEDS TO BE BROUGHT TO FRONT** */
margin-left: auto;
margin-right: auto;
padding: 8px;
border-radius: 4px;
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
transition: 0.4s ease;
background-color: red;
/* rgba(0,0,80,0.2); */
margin-top: 0;
/* Add this */
position: relative;
z-index: 1000;
}
h1:hover {
box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
transition: 0.4s ease;
}
img {
height: 80%;
width: 50%;
/* z-index: 0; */
}
.center {
text-align: center;
margin: 0 auto;
}
<div class="center">
<div class="container">
<div class="container-corner-img">
<img src="https://stocknews.com/wp-content/uploads/2017/07/facebook-fb-alternate.jpg">
</div>
<h1>
<a id="mlnk" href="#link"> Please login to your facebook account first</a>
</h1>
<h3>You need to Log In</h3>
</div>
</div>
First off, here is the link to see what I am talking about. It is going to be a little bit hard to understand what I am saying without seeing it. I have two images in one container if you hover over the container the front image rotates out and the back image rotates in. The rotation is fine but the text from the front image is being shown at the back of the image. I think the reason is simply that I have translateX on both texts. But only the front image text is shown in the back and not the other way around. Is there a way to stop that from happening?
Code
.container {
margin: auto;
width: 1200px;
border-right: 1px solid grey;
border-left: 1px solid grey;
padding: 3em 0;
}
.img-container {
display: block;
max-width: 800px;
width: 100%;
margin: auto;
position: relative;
text-decoration: none;
}
.img-fluid {
width: 100%;
height: 100%;
}
.img {
height: 400px;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
background-size: cover;
background-repeat: no-repeat;
transition: transform 0.7s ease-out;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.text {
color: white;
transform-style: preserve-3d;
transform: translateZ(60px);
text-align: center;
font-size: 36px;
text-decoration: none;
font-family: arial;
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
}
.inverse .text {
transform: translateZ(60px);
}
.text h3 {
text-decoration: none;
align-self: center;
text-transform: capitalize;
}
.text p {
max-width: 66%;
margin: 10px auto;
text-align: center;
}
.inverse {
transform: rotateY(180deg);
position: absolute;
top: 0;
z-index: -1;
background-image: linear-gradient(rgba(60, 60, 221, 0.5), rgba(9, 9, 170, 0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
}
/* .visit{
display:inline-block;
text-align:center;
background:white;
color:blue;
text-transform:capitalize;
max-width:100px;
padding:1em 2em;
text-align:center;
margin:0;
border-style:none;
border-radius: 25px;
} */
.img.normal {
transform: rotateY(0);
}
.img-container:hover .normal {
transform: rotateY(180deg);
background-image: linear-gradient(rgba(60, 60, 221, 0.5), rgba(9, 9, 170, 0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
}
.img-container:hover .inverse {
transform: rotateY(0deg)
}
<div class="container">
<a href="#" class="img-container">
<div class="img-fluid img normal">
<div class="text">
<h3>Header</h3>
</div>
</div>
<div class="img-fluid img inverse">
<div class="text">
<h3>Header</h3>
<p>this is a summary something something something</p>
</div>
</div>
</a>
</div>
Your answer is following link.
Here is your working code
If you don't want to remove translateZ then just add backface-visiblity: hidden;
Like
.text{
color:white;
transform-style:preserve-3d;
transform: translateZ(60px);
text-align:center;
font-size:36px;
text-decoration:none;
font-family:arial;
display:flex;
justify-content:center;
flex-direction:column;
height:100%;
backface-visibility:hidden; /* Added */
}
Working snippet of your answer without removing translateZ.
.container {
margin: auto;
width: 1200px;
border-right: 1px solid grey;
border-left: 1px solid grey;
padding: 3em 0;
}
.img-container {
display: block;
max-width: 800px;
width: 100%;
margin: auto;
position: relative;
text-decoration: none;
}
.img-fluid {
width: 100%;
height: 100%;
}
.img {
height: 400px;
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
background-size: cover;
background-repeat: no-repeat;
transition: transform 0.7s ease-out;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.text {
color: white;
transform-style: preserve-3d;
transform: translateZ(60px);
text-align: center;
font-size: 36px;
text-decoration: none;
font-family: arial;
display: flex;
justify-content: center;
flex-direction: column;
height: 100%;
backface-visibility: hidden;
/* Added */
}
.inverse .text {
transform: translateZ(60px);
}
.text h3 {
text-decoration: none;
align-self: center;
text-transform: capitalize;
}
.text p {
max-width: 66%;
margin: 10px auto;
text-align: center;
}
.inverse {
transform: rotateY(180deg);
position: absolute;
top: 0;
z-index: -1;
background-image: linear-gradient(rgba(60, 60, 221, 0.5), rgba(9, 9, 170, 0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
}
/* .visit{
display:inline-block;
text-align:center;
background:white;
color:blue;
text-transform:capitalize;
max-width:100px;
padding:1em 2em;
text-align:center;
margin:0;
border-style:none;
border-radius: 25px;
} */
.img.normal {
transform: rotateY(0);
}
.img-container:hover .normal {
transform: rotateY(180deg);
background-image: linear-gradient(rgba(60, 60, 221, 0.5), rgba(9, 9, 170, 0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
}
.img-container:hover .inverse {
transform: rotateY(0deg)
}
<div class="container">
<a href="#" class="img-container">
<div class="img-fluid img normal">
<div class="text">
<h3>Header</h3>
</div>
</div>
<div class="img-fluid img inverse">
<div class="text">
<h3>Header</h3>
<p>this is a summary something something something</p>
</div>
</div>
</a>
</div>
The second example to get it easily, by following.
.card-container {
display: inline-block;
margin: 0 auto;
padding: 0 12px;
perspective: 900px;
text-align: center;
}
.card {
position: relative;
width: 100px;
height: 100px;
transition: all 0.6s ease;
transform-style: preserve-3d;
}
.front,
.back {
position: absolute;
background: #FEC606;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 5px;
color: white;
box-shadow: 0 27px 55px 0 rgba(0, 0, 0, 0.3), 0 17px 17px 0 rgba(0, 0, 0, 0.15);
backface-visibility: hidden;
}
.front {
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
.back {
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.card-container:hover .card {
transform: rotateY(180deg);
}
.back {
transform: rotateY(180deg);
}
<div class="card-container">
<div class="card">
<div class="front">Hello</div>
<div class="back">User</div>
</div>
</div>
Change class .text into the below and the text won't rotate with the image:
.text{
color:white;
transform-style:preserve-3d;
transform: translateZ(60px), opacity:0;
text-align:center;
font-size:36px;
text-decoration:none;
font-family:arial;
display:flex;
justify-content:center;
flex-direction:column;
height:100%;
}
.container{
margin:auto;
width:1200px;
border-right:1px solid grey;
border-left:1px solid grey;
padding:3em 0;
}
.img-container{
display:block;
max-width:800px;
width:100%;
margin:auto;
position:relative;
text-decoration:none;
}
.img-fluid{
width:100%;
height:100%;
}
.img{
height:400px;
background-image:
linear-gradient(rgba(0, 0, 0,0.5), rgba(0, 0, 0,0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
background-size: cover ;
background-repeat: no-repeat;
transition: transform 0.7s ease-out;
transform-style:preserve-3d;
backface-visibility:hidden;
}
.text{
color:white;
transform-style:preserve-3d;
transform: translateZ(60px), opacity:0;
text-align:center;
font-size:36px;
text-decoration:none;
font-family:arial;
display:flex;
justify-content:center;
flex-direction:column;
height:100%;
}
.inverse .text{
transform:translateZ(60px);
}
.text h3{
text-decoration:none;
align-self:center;
text-transform:capitalize;
}
.text p{
max-width:66%;
margin:10px auto;
text-align:center;
}
.inverse{
transform:rotateY(180deg);
position:absolute;
top: 0;
z-index:-1;
background-image:
linear-gradient(rgba(60, 60, 221,0.5), rgba(9, 9, 170,0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
}
/* .visit{
display:inline-block;
text-align:center;
background:white;
color:blue;
text-transform:capitalize;
max-width:100px;
padding:1em 2em;
text-align:center;
margin:0;
border-style:none;
border-radius: 25px;
} */
.img.normal{
transform: rotateY(0);
}
.img-container:hover .normal{
transform:rotateY(180deg);
background-image:
linear-gradient(rgba(60, 60, 221,0.5), rgba(9, 9, 170,0.7)), url(http://r.ddmcdn.com/w_830/s_f/o_1/cx_98/cy_0/cw_640/ch_360/APL/uploads/2015/07/cecil-AP463227356214-1000x400.jpg);
}
.img-container:hover .inverse{
transform:rotateY(0deg)
}
<div class="container">
<a href="#" class="img-container">
<div class="img-fluid img normal">
<div class="text">
<h3>Header</h3>
</div>
</div>
<div class="img-fluid img inverse">
<div class="text">
<h3>Header</h3>
<p>this is a summary something something something</p>
</div>
</div>
</a>
</div>
I'm trying to add a centered arrow/triangle on each side of a rectangular tooltip div and I've tried applying some code from other questions and demos, but none look centered or the arrow's shadow overlaps the div. The arrow should be white with a shadow of 0 0 20px 0 rgba(0, 0, 0, 0.2);.
HTML:
<div class="tooltip cal-tooltip">
<div class="tooltip cal-tooltip">
<div class="cal-tooltip-cont">
<div class="cal-tooltip-img four-three-img">
<img src="http://placeholdit.imgix.net/~text?txtsize=75&txt=Event%20Photo&w=600&h=400" />
</div>
<div class="card-info">
<h2>Wrapping related content title</h2>
<h3>Event date</h3>
<h3>Event venue</h3>
</div>
</div>
</div>
CSS:
.tooltip {
position: absolute;
top: 0;
z-index: 1;
background-color: white;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
}
.tooltip > div {
padding: 15px;
}
.tooltip > div img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.cal-tooltip {
width: 20em;
cursor: auto;
}
.cal-tooltip .cal-tooltip-cont {
display: flex;
}
.cal-tooltip .cal-tooltip-cont > div {
flex-basis: 50%;
}
.cal-tooltip .cal-tooltip-cont > div:nth-child(1) {
padding-right: 5px;
}
.cal-tooltip .cal-tooltip-cont > div:nth-child(2) {
padding-left: 5px;
}
.cal-tooltip .cal-tooltip-cont > div h2 {
padding-bottom: 5px;
font-size: 1em;
}
.cal-tooltip .cal-tooltip-cont > div h3 {
font-size: .85em;
}
Demo: http://codepen.io/ourcore/pen/Lxeapj
Try something like this:
.tooltip {
position: absolute;
top: 20px;
left: 60px;
z-index: 1;
background-color: #fff;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, .2);
width: 17em;
padding: 15px;
}
.tooltip:after {
content: "";
position: absolute;
width: 0;
height: 0;
margin-left: -1em;
margin-top: -1em;
left: 100%; /* change to 0% for left arrow */
top: 50%;
box-sizing: border-box;
border: 1em solid black;
border-color: transparent transparent #fff #fff;
transform-origin: 50% 50%;
transform: rotate(-135deg); /* change to 45 deg for left arrow */
box-shadow: -5px 5px 10px 0 rgba(0, 0, 0, 0.1);
}
.card {
display: flex;
}
.card img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.card > div {
flex-basis: 50%;
}
.card-info {
padding-left: 15px;
}
<div class="tooltip">
<div class="card">
<div class="card-image">
<img src="http://placeholdit.imgix.net/~text?txtsize=75&txt=Event%20Photo&w=600&h=400" />
</div>
<div class="card-info">
<h2>Test title</h2>
<h3>Event date</h3>
<h3>Event venue</h3>
</div>
</div>
</div>
Inspired by this: https://codepen.io/ryanmcnz/pen/JDLhu
It's a start at least. Hope it helps!
Having problem with jumbotron centering text horizontal and vertical..
how do i achieved this? i have tried vertical-align ang text align but
still not working.. help pls.
HTML CODE HERE
<html>
<head></head>
<body>
<section class="jumbotron-section-1">
<div class="jumbotron no-margin jumbotron-section-1-bg">
<div class="container-fluid introduction">
<h1 class="name">Full Name</h1>
<p>Some text here..</p>
Some text here..
</div>
</div>
</section>
</body
</html>
CSS CODE HERE
<style>
.jumbotron-section-1 {
padding-top: 70px !important;
}
.jumbotron-section-1-bg {
background: url('../img/banner-img/bg10.jpg') no-repeat center center;
height: 768px;
background-size:100% 100%;
background-attachment: ;
}
.introduction {
text-align: center;
vertical-align: middle;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.name {
font-family: "custom-headerfont",sans-serif;
}
.introduction p {
font-weight: bold;
}
</style>
This is what i did and it work
.jumbotron-section-1 {
padding-top: 70px !important;
}
.jumbotron-section-1-bg {
background: url('../img/banner-img/bg10.jpg') no-repeat center center;
height: 768px;
background-size:100% 100%;
background-attachment: ;
}
.introduction {
position: absolute;
left: 50%;
top: 50%;
bottom: auto;
right: auto;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
text-align: center;
width: 100%;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.name {
font-family: "custom-headerfont",sans-serif;
}
.introduction p {
font-weight: bold;
}
<style>
.jumbotron-section-1 {
}
.jumbotron-section-1-bg {
background: url('../img/banner-img/bg10.jpg') no-repeat center center;
width: 100%;
height: 100%;
}
.introduction {
width:300px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
text-align: center;
}
.name {
font-family:"custom-headerfont", sans-serif;
}
.introduction p {
font-weight: bold;
}
</style>