so i have this Parallax template that i'm playing around, and i want to add DIV element so after scroll down the DIV will show up, but the problem i'm having that the element moves to the left side and when i zoom out on the browser to something 25% the right hand side is all filled up. How can i correct this?
Div moves to left
Zoom out DIV is filled on right
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Firewatch Parallax in CSS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="parallax">
<div class="parallax__layer parallax__layer__0">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_0.png" />
</div>
<div class="parallax__layer parallax__layer__1">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_1.png" />
</div>
<div class="parallax__layer parallax__layer__2">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_2.png" />
</div>
<div class="parallax__layer parallax__layer__3">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_3.png" />
</div>
<div class="parallax__layer parallax__layer__4">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_4.png" />
</div>
<div class="parallax__layer parallax__layer__5">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_5.png" />
</div>
<div class="parallax__layer parallax__layer__6">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_6.png" />
</div>
<div class="parallax__cover">
<section class="section section_dark">
<h2>Section One</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus,
commodi,
fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum
</p>
</section>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
html,
body {
background-color: #FEDCC8;
}
.parallax {
-webkit-perspective: 100px;
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -1500px;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer img {
display: block;
position: absolute;
bottom: 0;
}
.parallax__cover {
background: rgb(199, 27, 187);
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 2000px;
z-index: 2;
/* left: 20%; */
}
.parallax__layer__0 {
-webkit-transform: translateZ(-300px) scale(4);
transform: translateZ(-300px) scale(4);
}
.parallax__layer__1 {
-webkit-transform: translateZ(-250px) scale(3.5);
transform: translateZ(-250px) scale(3.5);
}
.parallax__layer__2 {
-webkit-transform: translateZ(-200px) scale(3);
transform: translateZ(-200px) scale(3);
}
.parallax__layer__3 {
-webkit-transform: translateZ(-150px) scale(2.5);
transform: translateZ(-150px) scale(2.5);
}
.parallax__layer__4 {
-webkit-transform: translateZ(-100px) scale(2);
transform: translateZ(-100px) scale(2);
}
.parallax__layer__5 {
-webkit-transform: translateZ(-50px) scale(1.5);
transform: translateZ(-50px) scale(1.5);
}
.parallax__layer__6 {
-webkit-transform: translateZ(0px) scale(1);
transform: translateZ(0px) scale(1);
}
.section {
text-align: center;
padding: 50px 80px;
/* position: fixed; */
/* z-index: 1; */
/* left: 20px;
right: 20px; */
line-height: auto;
box-shadow: 0px 0px 40px -1px #000000bf;
/* left: 80%; */
}
.section_dark {
background-color: #282e34;
color: #ddd;
}
You have a negative margin on the .parallax element and it is since it is positioned absolute you should position it 0 units from the left of it's containing element:
body {
margin: 0;
position: relative;
}
.parallax {
top: 0;
/* left: 50%; */
left: 0;
right: 0;
bottom: 0;
/* margin-left: -1500px; */
}
Doing the above alone should center the element but your img element will become smaller than the original example you gave. You can fix this by setting the height of the image to a height that you're happy with and a width of 100% then using the object-fit to handle the skewing of the aspect ratio:
.parallax__layer img {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70%; // set this to what you want
object-fit: cover;
}
See below for a full demo:
* {
box-sizing: border-box;
}
html,
body {
background-color: #FEDCC8;
}
body {
margin: 0;
position: relative;
}
.parallax {
-webkit-perspective: 100px;
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
/* left: 50%; */
left: 0;
right: 0;
bottom: 0;
/* margin-left: -1500px; */
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer img {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70%;
object-fit: cover;
}
.parallax__cover {
background: rgb(199, 27, 187);
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 2000px;
z-index: 2;
/* left: 20%; */
}
.parallax__layer__0 {
-webkit-transform: translateZ(-300px) scale(4);
transform: translateZ(-300px) scale(4);
}
.parallax__layer__1 {
-webkit-transform: translateZ(-250px) scale(3.5);
transform: translateZ(-250px) scale(3.5);
}
.parallax__layer__2 {
-webkit-transform: translateZ(-200px) scale(3);
transform: translateZ(-200px) scale(3);
}
.parallax__layer__3 {
-webkit-transform: translateZ(-150px) scale(2.5);
transform: translateZ(-150px) scale(2.5);
}
.parallax__layer__4 {
-webkit-transform: translateZ(-100px) scale(2);
transform: translateZ(-100px) scale(2);
}
.parallax__layer__5 {
-webkit-transform: translateZ(-50px) scale(1.5);
transform: translateZ(-50px) scale(1.5);
}
.parallax__layer__6 {
-webkit-transform: translateZ(0px) scale(1);
transform: translateZ(0px) scale(1);
}
.section {
text-align: center;
padding: 50px 80px;
/* position: fixed; */
/* z-index: 1; */
/* left: 20px;
right: 20px; */
line-height: auto;
box-shadow: 0px 0px 40px -1px #000000bf;
/* left: 80%; */
}
.section_dark {
background-color: #282e34;
color: #ddd;
}
<div class="parallax">
<div class="parallax__layer parallax__layer__0">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_0.png" />
</div>
<div class="parallax__layer parallax__layer__1">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_1.png" />
</div>
<div class="parallax__layer parallax__layer__2">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_2.png" />
</div>
<div class="parallax__layer parallax__layer__3">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_3.png" />
</div>
<div class="parallax__layer parallax__layer__4">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_4.png" />
</div>
<div class="parallax__layer parallax__layer__5">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_5.png" />
</div>
<div class="parallax__layer parallax__layer__6">
<img src="https://sam.beckham.io/images/articles/firewatch/layer_6.png" />
</div>
<div class="parallax__cover">
<section class="section section_dark">
<h2>Section One</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, laudantium, quibusdam? Nobis, delectus,
commodi,
fugit amet tempora facere dolores nisi facilis consequatur, odio hic minima nostrum. Perferendis eos earum
</p>
</section>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
By adjusting the .parallax class I managed to get this result.
I removed the negative margin and set the left value to zero to expand the container to full-width.
.parallax {
-webkit-perspective: 100px;
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
/* left: 50%; -- removed */
left: 0; /* added this to make it full-width */
right: 0;
bottom: 0;
/* margin-left: -1500px; -- removed */
}
Hope that helps
Commented out some positioning styles applied to the parent parallax div .parallax as that was dragging the whole content to the left, off screen.
Tried to center images .parallax__layer img by increasing the size to 300% and adding negative left and right margins.
* {
box-sizing: border-box;
}
html,
body {
background-color: #FEDCC8;
}
.parallax {
-webkit-perspective: 100px;
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
/* position: absolute; */
/* top: 0; */
/* left: 50%; */
/* right: 0; */
/* bottom: 0; */
/* margin-left: -1500px; */
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer img {
display: block;
position: absolute;
bottom: 0;
width:300%;
right:-100%;
left-:-100%;
}
.parallax__cover {
background: rgb(199, 27, 187);
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 2000px;
z-index: 2;
/* left: 20%; */
}
.parallax__layer__0 {
-webkit-transform: translateZ(-300px) scale(4);
transform: translateZ(-300px) scale(4);
}
.parallax__layer__1 {
-webkit-transform: translateZ(-250px) scale(3.5);
transform: translateZ(-250px) scale(3.5);
}
.parallax__layer__2 {
-webkit-transform: translateZ(-200px) scale(3);
transform: translateZ(-200px) scale(3);
}
.parallax__layer__3 {
-webkit-transform: translateZ(-150px) scale(2.5);
transform: translateZ(-150px) scale(2.5);
}
.parallax__layer__4 {
-webkit-transform: translateZ(-100px) scale(2);
transform: translateZ(-100px) scale(2);
}
.parallax__layer__5 {
-webkit-transform: translateZ(-50px) scale(1.5);
transform: translateZ(-50px) scale(1.5);
}
.parallax__layer__6 {
-webkit-transform: translateZ(0px) scale(1);
transform: translateZ(0px) scale(1);
}
.section {
text-align: center;
padding: 50px 80px;
/* position: fixed; */
/* z-index: 1; */
/* left: 20px;
right: 20px; */
line-height: auto;
box-shadow: 0px 0px 40px -1px #000000bf;
/* left: 80%; */
}
.section_dark {
background-color: #282e34;
color: #ddd;
}
Related
I would like to have a hover effect on image that would display two buttons on mouse hover. I got it partially working. However currently my image has some black borders on sides, also image itself is somehow shrunk and buttons are not positioned in the centre. Does anybody have some idea how to fix these issues?
Here is how it looks like currently:
.container {
background-color: #000;
display: inline-block;
font-size: 16px;
overflow: hidden;
position: relative;
text-align: center;
width: 110px;
height: 110px;
}
.container:before,
.container:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-transition: all 0.35s ease;
transition: all 0.35s ease;
background-color: #000000;
border-left: 0px solid #fff;
border-right: 0px solid #fff;
content: '';
opacity: 0.3;
z-index: 1;
}
.container:before {
-webkit-transform: skew(0deg) translateX(-155%);
transform: skew(0deg) translateX(-155%);
}
.container:after {
-webkit-transform: skew(0deg) translateX(155%);
transform: skew(0deg) translateX(155%);
}
.container img {
backface-visibility: hidden;
width: 100%;
height: 100%;
vertical-align: top;
}
.container button {
top: 50%;
left: 50%;
position: absolute;
z-index: 2;
-webkit-transform: translate(-50%, -180%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
.container:hover button {
opacity: 1;
}
.container:hover>img,
.container.hover>img {
opacity: 0.5;
}
.container:hover:before,
.container.hover:before {
-webkit-transform: skew(0deg) translateX(-50%);
transform: skew(0deg) translateX(-50%);
}
.container:hover:after,
.container.hover:after {
-webkit-transform: skew(0deg) translateX(50%);
transform: skew(0deg) translateX(50%);
}
.container:hover figcaption,
.container.hover figcaption {
-webkit-transform: translate(-50%, -50%) scale(1);
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
<div class="container">
<img src="https://www.industrialempathy.com/img/remote/ZiClJf-1920w.jpg" />
<Row>
<Col Span="12">
<Button OnClick="() => this.RemoveImage(context)" Danger>Delete</Button>
</Col>
<Col Span="12">
<Button OnClick="() => this.OpenPreviewDialog(context)">View</Button>
</Col>
</Row>
</div>
body {
height: 100vh;
display: grid;
place-items: center;
}
.content img {
width: 50vw;
}
.content {
display: grid;
place-items: center;
position: relative;
}
#button-div {
position: absolute;
display: none;
}
.content img:hover~#button-div {
display: flex;
gap: 0.5em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<img src="https://laaouatni.github.io/w11-clone/images/1dark.jpg" alt="">
<div id="button-div">
<button>first button</button>
<button>second button</button>
</div>
</div>
</body>
</html>
Actually, both buttons are overlapped. You need to set separate class for both button and change top positioning.
HTML:
<Button class="button1" OnClick="() => this.RemoveImage(context)" Danger tool>Delete</Button>
<Button class="button2" OnClick="() => this.OpenPreviewDialog(context)">View</Button>
CSS:
.container button1 {
top: 60%;
left: 50%;
position: absolute;
z-index: 2;
-webkit-transform: translate(-50%, -180%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
.container button2 {
top: 40%;
left: 50%;
position: absolute;
z-index: 2;
-webkit-transform: translate(-50%, -180%) scale(0.5);
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
}
Hope it helps.
I'm trying to make a parallax layout for a site. Following a tutorial that has a great end result but is too much for my needs, so I just left the first two layers. But this results in a big white space right below the last layer that I only see en chrome and not firefox but have no idea how to get rid of. Here is a jsfiddle snippet, as you can see it is very little code but I can't find where this could be coming from. Of course the error only shows in this fiddle if you open it in chrome.
/* Parallax base styles
--------------------------------------------- */
.parallax {
height: 500px; /* fallback for older browsers */
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
-webkit-perspective-origin-x: 100%;
perspective-origin-x: 100%;
}
.parallax__group {
position: relative;
height: 500px; /* fallback for older browsers */
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform-origin-x: 100%;
transform-origin-x: 100%;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-290px) scale(2);
transform: translateZ(-290px) scale(2);
z-index: 3;
}
.parallax__layer--deep {
-webkit-transform: translateZ(-600px) scale(3);
transform: translateZ(-600px) scale(3);
z-index: 2;
}
/* demo styles */
body, html {
overflow: hidden;
}
body {
font: 100% / 1.5 Arial;
}
* {
margin:0;
padding:0;
}
.parallax {
font-size: 200%;
}
/* centre the content in the parallax layers */
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#group1 {
z-index: 5; /* slide over group 2 */
}
#group1 .parallax__layer--base {
background: rgb(102,204,102);
}
#group2 {
z-index: 3; /* slide under groups 1 and 3 */
}
#group2 .parallax__layer--back {
background: rgb(123,210,102);
}
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--back">
<div class="title">Background Layer</div>
</div>
</div>
</div>
I think your expected result is like this.
The tricky things is that you need to set the position of background layer as absolute but not relative. Then you will manage easier.
The reason of your code doesnt work is that the browser may read your background as position relative first, and then your inside div you set it absolute, transform: translateZ(-290px), so that there is a space at the bottom. For another example, just like you set a div height as 600px and then set the padding-bottom as 400px which means the height is 600px, but the actual content will be 200px. You know css is quite stupid.Haha
/* Parallax base styles
--------------------------------------------- */
.parallax {
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
}
.parallax__group {
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform-origin-x: 100%;
transform-origin-x: 100%;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
background: rgb(123,210,102);
}
.parallax {
font-size: 200%;
}
/* centre the content in the parallax layers */
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#group1 {
position: relative;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 5; /* slide over group 2 */
}
#group1 .parallax__layer--base {
background: rgb(102,204,102);
}
#group2 {
z-index: 3;
position: absolute;
width: 100%;
transform: translateZ(-290px) scale(2);
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
<div class="parallax">
<div id="group1" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">Base Layer</div>
</div>
</div>
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--back">
<div class="title">Background Layer</div>
</div>
</div>
</div>
I'm currently creating an online portfolio and am attempting to use parallax CSS for nice scrolling effects. I have a class which applies certain styles and formatting to divs which are the different sections.
Long story short, to avoid the overflow of the parallax making the page too wide, I am hiding the x overflow so it is shortened to the viewport width. However, this leaves some whitespace on the left side of the screen which is really annoying.
* {
padding: 0;
margin: 0;
}
body {
font: 100% / 1.5;
}
#homeSplash {
background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
background-size: cover;
color: white;
text-align: center;
}
#title {
background: rgba(255, 255, 255, 0.75);
padding: 50px;
font-family: 'Ubuntu Condensed', sans-serif;
}
#title h3,
h4,
h1 {
padding: 10px;
}
.parallax {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
-webkit-perspective: 300px;
perspective: 300px;
font-size: 200%;
}
.parallax__group {
position: relative;
height: 500px;
/* fallback for older browsers */
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
#group2 {
z-index: 3;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parallax">
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">
<div id="title">
<h1>Welcome</h1>
<h3>I am Luca Passariello</h3>
<h4>Welcome to my Portfolio</h4>
</div>
</div>
</div>
<div id="homeSplash" class="parallax__layer parallax__layer--back">
</div>
</div>
</div>
I've tried to use width: 100vw which did nothing to help the problem. Any help would be greatly appreciated.
Note - The live site is here
Adding width:100vw to .parallax__group fixed the problem.
*{
padding: 0;
margin: 0;
}
body{
font: 100% / 1.5;
margin: 0;
}
#homeSplash {
background-image: url(https://cdn-images-1.medium.com/max/1600/0*WW-iV1yoPWqUcd5H.);
background-size: cover;
color: white;
text-align: center;
}
#title{
background: rgba(255, 255, 255, 0.75);
padding: 50px;
font-family: 'Ubuntu Condensed', sans-serif;
}
#title h3, h4, h1{
padding: 10px;
}
.parallax {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
-webkit-perspective: 300px;
perspective: 300px;
font-size: 200%;
}
.parallax__group {
position: relative;
height: 500px; /* fallback for older browsers */
height: 100vh;
width: 100vw;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.parallax__layer--fore {
-webkit-transform: translateZ(90px) scale(.7);
transform: translateZ(90px) scale(.7);
z-index: 1;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}
#group2 {
z-index: 3;
}
.title {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
<div class="parallax">
<div id="group2" class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div class="title">
<div id="title">
<h1>Welcome</h1>
<h3>I am Luca Passariello</h3>
<h4>Welcome to my Portfolio</h4>
</div>
</div>
</div>
<div id="homeSplash" class="parallax__layer parallax__layer--back"
</div>
</div>
</div>
</div>
I'm having a problem with html5 and css3, something is happening as a bug when I do hover in the image. Was for him to appear as the first 2 but does not appear only appears quickly in the hover in the image and already algune would know to tell me why this? Below the first image and the system running normally and the second image and the hover in the image.
my code HTML5:
<div class="col-lg-12" id="container">
<div class="ala col-lg-3 col-md-4 col-sm-6 col-xs-12 col-md-25">
<span style="position: absolute;top: -25px;font-size:1rem;margin-left: -30px;color:#666;left: 50%;font-family:'Lato', sans-serif;display:block" class="rate"> <input type="checkbox" name="star[]" class="star" value="1" id="star_1" checked>Favorita</span>
<div class="hovereffect clic">
<div class="clic" style="display:block"></div>
<div class="heart"></div>
<img class="img-responsive" src="../images/photo/namePhoto.jpg" alt="namePhoto">
<div class="overlay">
<a class="info test-popup-link" href="../images/photo/namePhoto.jpg"><img src="../images/lupa.png"></a><br><br><br>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary check active">
<input type="checkbox" class="ck" name="ck[]" checked value="1" id="ck_1"> <span class="che">Desmarcar</span>
</label>
</div>
</div>
</div>
</div>
My highlighted elements CSS code:
.hovereffect .clic {
background-color: #13B8DC;
z-index: 1;
overflow: hidden;
width: 80px;
height: 80px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
position: absolute;
top: -30px;
}
.clic:before {
content: "\f00c";
font: normal normal normal 14px/1 FontAwesome;
position: absolute;
top: 9px;
color: #fff;
z-index: 2;
font-size: 1rem;
left: 4px;
}
.hovereffect .heart {
width: 80px;
height: 80px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
position: absolute;
right: -80px;
top: -25px;
}
.heart {
background-color: #f36a5a;
z-index: 1;
}
.heart:before {
content: "\f004";
font: normal normal normal 14px/1 FontAwesome;
position: absolute;
top: 31px;
color: #fff;
z-index: 2;
font-size: 1.1rem;
left: 4px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.ala{
width: 100%;
break-before: avoid;
break-after: avoid;
break-inside: avoid;
margin-top: 30px;
}
#container{
column-count: 5;
column-gap: 0;
}
These are the codes that appear both in the first image and in the second, but that do not appear in the rest of the images, could someone tell me what I can do to correct this error?
this demo:
https://jsfiddle.net/h69atvrc/
-> please attachment fontawesome library and link css in html
-> also set image path
.ala {
margin-top: 30px;
}
.clic::before {
color: #ffffff;
content: '\f00c';
font-family: 'FontAwesome';
font-size: 14px;
left: 4px;
position: absolute;
top: 9px;
z-index: 2;
}
.clic {
border-color: #13b8dc;
}
.hovereffect {
cursor: default;
float: left;
height: 100%;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
.hovereffect .clic {
background-color: #13b8dc;
height: 80px;
overflow: hidden;
position: absolute;
top: -30px;
transform: rotate(-45deg);
transform-origin: 0 100% 0;
width: 80px;
z-index: 1;
}
.hovereffect .heart {
height: 80px;
position: absolute;
right: -80px;
top: -25px;
transform: rotate(-45deg);
transform-origin: 0 100% 0;
width: 80px;
}
.heart {
background-color: #f36a5a;
z-index: 1;
}
.hovereffect img {
display: block;
position: relative;
transition: all 0.2s linear 0s;
}
.hovereffect .overlay {
background-color: rgba(0, 0, 0, 0.5);
height: 100%;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
top: 0;
transition: all 0.2s ease-in-out 0s;
width: 100%;
}
.heart::before {
color: #ffffff;
content: '\f004';
font-family: 'FontAwesome';
font-size: 14px;
left: 4px;
position: absolute;
top: 31px;
transform: rotate(90deg);
z-index: 2;
}
.hovereffect:hover .overlay {
opacity: 1;
}
<div class="ala col-lg-3 col-md-3 col-sm-6 col-xs-12 col-md-25">
<span style="position: absolute;top: -25px;font-size:1rem;margin-left: -30px;color:#666;left: 50%;font-family:'Lato', sans-serif;display:block" class="rate"></span>
<div class="hovereffect clic">
<div class="clic" style="display:block"></div>
<div class="heart"></div>
<img class="img-responsive" src="image01.jpg" alt="namePhoto">
<div class="overlay">
<a class="info test-popup-link" href="image02.jpg"></a>
<br>
<br>
<br>
<br>
<br>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary check active">
<input class="ck" name="ck[]" checked="" value="1" id="ck_1" type="checkbox"> <span class="che">Desmarcar</span>
</label>
</div>
</div>
</div>
</div>
strong text
I have to make a logo shape in my website. The design is given below. How do I develop that?
For the first part of the logo I have created it using CSS3 skew property,
I have fiddled the link below. How do I develop the triangle section and the third part of the logo. The triangle is slider, so images inside should change.
https://jsfiddle.net/iamshajeer/x2og8utk/1/
.logo-menu {
height: 76%;
left: 11%;
margin: 0 auto;
width: 80%;
}
.first-part {
display: inline-block;
left: 135px;
position: relative;
transform: skew(-22deg);
width: 180px;
}
.menu-1{
background:red
}
.menu-2{
background:blue
}
.menu-3{
background:yellow
}
<div class="logo-menu">
<div class="first-part">
<div class="menu-1" style="height: 167px;">
<h3>About Us</h3>
</div>
<div class="menu-2" style="height: 167px;">
<h3>Gallery</h3>
</div>
<div class="menu-3" style="height: 167px;">
<h3>Get in Touch with</h3>
</div>
</div>
</div>
You could use CSS transforms to rotate and skew an element into a diamond, and then reverse those transforms for the child elements. If you have overflow: hidden; on the diamond and position the diamond in a wrapper that also has overflow: hidden;, you could produce a clipping triangle with content using just CSS.
Working Example (Codepen):
/* Clip the bottom half of the diamond. */
.triangle-wrap {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
}
/* Rotate and skew to create a diamond. */
.triangle {
background: grey;
position: absolute;
bottom: -50%;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-transform: rotate(45deg) skew(20deg, 20deg);
-moz-transform: rotate(45deg) skew(20deg, 20deg);
-ms-transform: rotate(45deg) skew(20deg, 20deg);
transform: rotate(45deg) skew(20deg, 20deg);
}
/* Reset the skew and rotation. */
.triangle-reset {
width: 100%;
height: 100%;
position: relative;
-webkit-transform: skew(-20deg, -20deg) rotate(-45deg);
-moz-transform: skew(-20deg, -20deg) rotate(-45deg);
-ms-transform: skew(-20deg, -20deg) rotate(-45deg);
transform: skew(-20deg, -20deg) rotate(-45deg);
}
/* Create a content wrapper. */
.triangle-content {
background: url('http://placehold.it/400x400') no-repeat;
background-position: center center;
background-size: cover;
position: relative;
width: 120%;
height: 120%;
left: -10%;
bottom: 65%;
}
/* Visual aid. */
html {
min-height: 100%;
background: linear-gradient(to bottom, #336666 0%,#663366 100%);
}
<div class="triangle-wrap">
<div class="triangle">
<div class="triangle-reset">
<div class="triangle-content">
</div>
</div>
</div>
</div>
background-clip is what you're looking for. Check out this great article:
https://css-tricks.com/clipping-masking-css/
Here's an online tool to help you generate shapes:
http://bennettfeely.com/clippy/
After you generate each shape, you can position them to look like your image.
It is not perfect what you want but near to that.
Right side first div not looking good.
.third-part {
display: inline-block;
left: 500px;
position: relative;
transform: skew(22deg);
width: 180px;
}
.logo-menu {
height: 76%;
left: 11%;
margin: 0 auto;
width: 80%;
}
.first-part {
display: inline-block;
left: 135px;
position: relative;
transform: skew(-22deg);
width: 180px;
}
.menu-1{
background:red
}
.menu-10{
background: blue;
/* Skew */
left: -70px;
position: relative;
transform: skew(50deg);
width: 190px;
}
.menu-2{
background:blue
}
.menu-3{
background:yellow
}
.second-part {
top: 36%;
}
.second-part {
}
.second-part {
display: inline-block;
height: 100%;
left: 240px;
position: absolute;
top: 25%;
width: 520px;
}
.second-part .triangle-shape {
left: 4%;
margin: 0;
max-width: 700px;
position: absolute;
}
.wrap {
display: inline-block;
margin: 240px 0;
transform: rotate(45deg) translate3d(0px, 0px, 0px);
transition: transform 300ms ease-out 0s;
width: 500px;
}
.crop {
height: 465px;
margin: 0;
overflow: hidden;
position: relative;
transform: skew(22deg, 22deg) translate3d(0px, 0px, 0px);
width: 450px;
}
.crop img {
height: 650px;
left: -50%;
opacity: 1;
position: absolute;
top: -50%;
transform: skew(-20deg, -20deg) rotate(-45deg);
transition: opacity 300ms ease-in-out 0s;
width: 500px;
}
}
.second-part .triangle-shape {
left: 4%;
margin: 0;
max-width: 700px;
position: absolute;
}
.wrap {
display: inline-block;
margin: 240px 0;
transform: rotate(45deg) translate3d(0px, 0px, 0px);
transition: transform 300ms ease-out 0s;
width: 500px;
}
.crop {
height: 465px;
margin: 0;
overflow: hidden;
position: relative;
transform: skew(22deg, 22deg) translate3d(0px, 0px, 0px);
width: 450px;
}
.crop img {
height: 650px;
left: -50%;
opacity: 1;
position: absolute;
top: -50%;
transform: skew(-20deg, -20deg) rotate(-45deg);
transition: opacity 300ms ease-in-out 0s;
width: 500px;
}
<div class="logo-menu">
<div class="first-part">
<div class="menu-1" style="height: 167px;">
<h3>About Us</h3>
</div>
<div class="menu-2" style="height: 167px;">
<h3>Gallery</h3>
</div>
<div class="menu-3" style="height: 167px;">
<h3>Get in Touch with</h3>
</div>
</div>
<div class="second-part">
<div class="triangle-shape">
<div class="wrap">
<div class="crop">
<img alt="" src="http://s23.postimg.org/wlo0phrsb/triangle01.jpg">
<h2>Projects</h2>
</div>
</div>
</div>
</div>
<div class="third-part">
<div class="menu-10" style="height: 120px;">
<h3>Products</h3>
</div>
<div class="menu-2" style="height: 167px;">
<h3>Services</h3>
</div>
<div class="menu-3" style="height: 167px;">
<h3>Location Map</h3>
</div>
</div>
</div>
Hope it will help to move forward.
Check Fiddle.
You can use SVG (http://www.w3schools.com/svg/) to draw and position the shapes and then apply CSS over them like color and backgound to get the desired results.