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>
Related
I have created a template which have the page divided in two sections, when I display the site in a desktop resolution all works well, but when I run the site on a smartphone I get the half circle on top and the divider between the two images, not responsive:
Essentially the half red circle, should be reduced in a smartphone resolution, and the divider goes outside the two images, this is what I tried so far:
#media (max-width: 800px) {
.divider{
top: 14.5%;
left: 50%;
height: 64.2%;
transform: translateX(-50%);
}
.circle{
top: -45%;
left: 50%;
width: 500px;
height: 400px;
border-radius: 50%;
}
.logo{
top: 0.5%;
left: 22.5%;
}
}
the problem's that this doesn't cover all the resolution case, so the problem is not fixed at all.
Is there a way to handle all the resolutions and make that template really responsive?
This is my fiddle.
SNIPPET:
body {
background-color: #ffffff;
}
/*Overlay*/
.hovereffect {
width: 50%;
height: 90vh;
float: left;
overflow: hidden;
position: relative;
text-align: center;
cursor: default;
background: #a7151f;
}
.hovereffect .overlay {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
padding: 50px 20px;
justify-content: center;
flex-direction: column;
display: flex;
}
.hovereffect img {
float: left;
width: 50%;
height: 90vh;
display: block;
position: relative;
max-width: none;
width: calc(100% + 20px);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(-10px, 0, 0);
transform: translate3d(-10px, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.hovereffect:hover img {
opacity: 0.4;
filter: alpha(opacity=40);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 40px;
overflow: hidden;
padding: 0.5em 0;
background-color: transparent;
opacity: 0;
filter: alpha(opacity=0);
}
.hovereffect h2:after {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.hovereffect:hover h2:after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.hovereffect a,
.hovereffect p {
color: #FFF;
opacity: 0;
filter: alpha(opacity=0);
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.hovereffect:hover a,
.hovereffect:hover p,
.hovereffect:hover h2 {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
font-size: 16px;
}
/*DIVISORE*/
.middle {
position: absolute;
z-index: 9999;
}
.divider {
border-right: 5px solid #a7151f;
position: absolute;
z-index: 10;
top: 14.5%;
left: 50%;
margin: 0;
padding: 0;
width: auto;
height: 76.2%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
}
.circle {
z-index: 10;
position: absolute;
top: -250px;
left: 50%;
border: 5px solid #a7151f;
margin: 0;
padding: 0;
height: 100%;
line-height: 0;
text-align: center;
text-transform: uppercase;
transform: translateX(-50%);
background-color: #a7151f;
width: 500px;
height: 400px;
border-radius: 50%;
}
.first {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/dg1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.second {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/bg9.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.logo {
top: 2.5%;
position: absolute;
left: 41.5%;
width: 200px;
margin: 0 auto;
}
<link href="https://demos.creative-tim.com/material-kit-pro/assets/css/material-kit.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Site
</title>
</head>
<body class="sections-page sidebar-collapse">
<div class="main">
<div class="container-fluid">
<div class="row">
<div class="hovereffect">
<img class="first">
<div class="overlay">
<h2>First</h2>
<p>
Explore
</p>
</div>
</div>
<span class="divider"></span>
<img class="img-responsive center-block circle">
<span class="circle">
</span>
<img src="#" class="logo" style="z-index: 9999">
<div class="hovereffect">
<img class="second">
<div class="overlay">
<h2>Second</h2>
<p>
Explore
</p>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center justify-content-xl-between">
<div class="col-6">
<div class="copyright text-center text-xl-left text-muted">
© 2019 Credit
</div>
</div>
<div class="col-6">
<div class="row">
Privacy Policy
Terms & Conditions
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
This kind of layout can be achieved with Flexbox with many fewer lines of code. Also, much less HTML markup is required.
Total responsiveness is achieved combining the flexbox behavior with relative units (%, vh, vw).
I put several comments in the CSS to explain what each rule is doing.
body { margin: 0; }
.the-container {
position: relative;
overflow: hidden;
height: 100vh; /* fill the screen */
width: 100vw; /* fill the screen */
}
.the-circle {
position: absolute; /* overlap the pics, removes it from the box flow */
background-color: #a7151f;
border-radius: 50%; /* rectangle becomes an ellipse */
width: 60vw;
height: 30vh;
top: -15vh; /* half of the height */
left: 0; /* these 3 lines... */
right: 0; /* ...keep the "circle"... */
margin: auto; /* ...centered at the top */
}
.the-image-wrapper {
display: flex; /* easy responsive columns */
height: 100%; /* fill the screen */
}
.the-image-wrapper > div {
flex: 1 0 auto; /* items inside the wrapper will grow to fit avilable space */
}
.the-image-wrapper > div.the-divider {
flex: 0 1 5px; /* this divider item will not grow, and will be 5px wide */
background-color: #a7151f;
}
.first {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/dg1.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.second {
background-image: url('https://demos.creative-tim.com/material-kit-pro/assets/img/bg9.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
<div class="the-container">
<div class="the-circle"></div>
<div class="the-image-wrapper">
<div class="first"></div>
<div class="the-divider"></div>
<div class="second"></div>
</div>
</div>
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;
}
}
I'd like to add triangle seperators between the sections of a page. Each section has a transparent background color.
There's a parent div that wraps around the sections and has a fixed background image.
Example of what I'm trying to achieve:
I'm having trouble positioning the seperator/arrow and creating the white border around it.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Site Name</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="section-1 downarrow">
<p>Section 1</p>
</div>
<div class="section-2">
<p>Section 2</p>
</div>
<div class="section-3">
<p>Section 2</p>
</div>
</div>
</body>
</html>
CSS:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
ul {list-style:none; list-style-position:outside;}
a {outline: none;}
.wrapper {
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.section-1 {
height: 500px;
background-color: rgba(12, 85, 184, .9);
}
.section-2 {
height: 500px;
background-color: rgba(95, 20, 20, .9);
}
.section-3 {
height: 500px;
background-color: rgba(12, 85, 184, .9);
}
.downarrow:after,.downarrow:before {
content: '';
position: absolute;
bottom: 0;
width: 50%;
z-index: 100;
border-bottom: 40px solid #fff;
-moz-transform: rotate(0.000001deg);
-webkit-transform: rotate(0.000001deg);
-o-transform: rotate(0.000001deg);
-ms-transform: rotate(0.000001deg);
transform: rotate(0.000001deg)
}
.downarrow:before {
right: 50%;
border-right: 40px solid transparent;
border-left: 1000px solid #fff;
}
.downarrow:after {
left: 50%;
border-left: 40px solid transparent;
border-right: 1000px solid #fff;
}
.downarrow {
overflow: hidden;
}
Any help or suggestions would be greatly appreciated.
Please check the updated one, i made some efforts to make it a look like as per the example image provided. please review the code. Hope it is helpful to you.
Note: Please update dimensions accordingly as per requirement. It is just a dummy.
.wrap {
position: relative;
height:300px;
overflow: hidden;
width: 80%;
margin: 0 auto;
background: url(https://farm8.staticflickr.com/7187/6895047173_d4b1a0d798.jpg) no-repeat center center;
overflow:hidden;
}
.wrap img {
width: 100%;
height: auto;
display: block;
}
.arrow {
position: absolute;
top: 50%;
width: 100%;
padding-bottom:3%;
margin-top: -3%;
background-color: rgba(0, 0, 0, 0.8);
}
.arrow:before, .arrow:after {
content:'';
position: absolute;
bottom: 100%;
width: 50%;
padding-bottom:inherit;
background-color: inherit;
border-top: 2px solid #fff;
}
.arrow:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
border-right: 3px solid #fff;
margin-right:-2px;
}
.arrow:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
border-left: 3px solid #fff;
margin-left:-2px;
}
.arrow1 {
position: absolute;
bottom: 50%;
width: 100%;
padding-bottom:3%;
background-color: rgba(0, 0, 0, 0.8);
transform: rotate(180deg);
margin-bottom: -3%;
}
.arrow1:before, .arrow1:after {
content:'';
position: absolute;
bottom: 100%;
width: 50%;
padding-bottom:inherit;
background-color: inherit;
border-top: 2px solid #fff;
}
.arrow1:before {
right: 50%;
-ms-transform-origin: 100% 100%;
-webkit-transform-origin: 100% 100%;
transform-origin: 100% 100%;
-ms-transform: skewX(45deg);
-webkit-transform: skewX(45deg);
transform: skewX(45deg);
border-right: 3px solid #fff;
margin-right:-2px;
}
.arrow1:after {
left: 50%;
-ms-transform-origin: 0 100%;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
-ms-transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
transform: skewX(-45deg);
border-left: 3px solid #fff;
margin-left:-2px;
}
<div class="wrap">
<div class="arrow"></div>
<div class="arrow1"></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 have the following HTML/CSS code
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#image {
background-image:url(https://upload.wikimedia.org/wikipedia/commons/5/50/Montage_of_Toronto_7.jpg);
display:block;
width:100%;
height:500px;
position:relative;
background-size:cover;
}
#blur {
display:block;
position:absolute;
width: 300px;
height:300px;
top:50%;
left:50%;
transform:translate(-50%,-50%);
border-radius:150px;
-webkit-filter:blur(10px); filter: blur(10px); -moz-filter:blur(30px); -ms-filter: blur(10px);
}
</style>
</head>
<body>
<div id="image">
<div id="blur"></div>
</div>
</body>
</html>
I want the middle of the image to be blurred into a dot. If I change the background color of #blur to blue, I can see that it exists. But the circle blur isn't happening.
Any suggestions on how to get a blurred circle in the picture via CSS ?
Workaround / solution:
You'll have to apply a blur to the initial image to blur it, since you can't apply it to a specified spot, we'll just have to use an overlay- blur this and resize it. We can use your dot pretty easily for this, just add the following CSS to your current file:
#blur {
background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/50/Montage_of_Toronto_7.jpg);
background-position: center center;
}
And the outcome would look like this:
<html>
<head>
<style type="text/css">
#image {
background-image:url(https://upload.wikimedia.org/wikipedia/commons/5/50/Montage_of_Toronto_7.jpg);
display:block;
width:500px;
height:500px;
position:relative;
}
#blur {
display:block;
position:absolute;
width: 300px;
height:300px;
top:50%;
left:50%;
background-image:url(https://upload.wikimedia.org/wikipedia/commons/5/50/Montage_of_Toronto_7.jpg);
background-position: center center;
transform:translate(-50%,-50%);
border-radius:150px;
-webkit-filter:blur(10px); filter: blur(10px); -moz-filter:blur(30px); -ms-filter: blur(10px);
}
</style>
</head>
<body>
<div id="image">
<div id="blur"></div>
</div>
</body>
</html>
you can use this code
body {
background: url('https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=') no-repeat center center fixed;
background-size: cover;
}
.blur {
background: url(https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=) no-repeat center center fixed;
background-size: cover;
overflow: hidden;
filter: blur(13px);
position: absolute;
height: 300px;
top: -50px;
left: -50px;
right: -50px;
bottom: -50px;
width: 300px;
margin: 0 auto;
border-radius: 100px;
}
.widget {
border: 5px solid rgba(255, 255, 255, .5);
height: 300px;
width: 300px;
border-radius: 100%;
overflow: hidden;
}
.center {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.text {
height: 300px;
width: 300px;
}
.text h1 {
text-align: center;
text-shadow: 1px 1px rgba(0, 0, 0, .1);
color: #ffffff;
margin-top: 100px;
font-family: 'Lora', serif;
font-weight: 700;
font-size: 38px;
}
.text p {
text-align: center;
color: #ffffff;
text-shadow: 1px 1px rgba(0, 0, 0, .1);
margin-top: 0px;
font-family: 'Lato', serif;
font-weight: 400;
font-size: 22px;
}
<div class="widget center">
<div class="blur"></div>
<div class="text center">
<h1 class="">Lorem ipsum</h1>
<p>sit amet ipsum dolor</p>
</div>
</div>