Need some help with an image overlay. I made a jsfiddle http://jsfiddle.net/7upzLdee/1/
<div class="rss-output" style="float:">
<div class="body">
<div class="overlay-feed"></div>
<div class="imagefix" style="float:none;">
<a target="_blank" href="#">
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a>
</div>
</div>
</div>
div.rss-output {
float: left;
width: 33.333%;
position: relative;
padding: 15px !important;
overflow: hidden;
}
.rss-output .body {
width: 100%;
}
.rss-output .overlay-feed {
background: #000 none repeat scroll 0% 0%;
z-index: 1;
position: absolute;
width: 100%;
height: 200px;
opacity: 0.5;
}
div.imagefix {
height: 200px;
line-height: 250px;
overflow: hidden;
text-align: center;
width: 100%;
}
div.imagefix img {
margin: -50%;
}
I cannot figure out why the overlay is going over the image on the right side. I've tried many things but no luck.
All help appreciated.
Thanks in advance
add position: relative for .rss-output .body
div.rss-output {
float: left;
width: 33.333%;
position: relative;
padding: 15px !important;
overflow: hidden;
}
.rss-output .body {
width: 100%;
position: relative;
}
.rss-output .overlay-feed {
background: #000 none repeat scroll 0% 0%;
z-index: 1;
position: absolute;
width: 100%;
height: 200px;
opacity: 0.5;
}
div.imagefix {
height: 200px;
line-height: 250px;
overflow: hidden;
text-align: center;
width: 100%;
}
div.imagefix img {
margin: -50%;
}
<div class="rss-output" style="float:">
<div class="body">
<div class="overlay-feed"></div>
<div class="imagefix" style="float:none;">
<a target="_blank" href="#">
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a>
</div>
</div>
</div>
added position:relative; to body, because, when you use position:absolute; on some element, it will ignore static parents and therefore its width
div.rss-output {
float: left;
width: 33.333%;
position: relative;
padding: 15px !important;
overflow: hidden;
}
.rss-output .body {
width: 100%;
position:relative;
}
.rss-output .overlay-feed {
background: #000 none repeat scroll 0% 0%;
z-index: 1;
position: absolute;
width: 100%;
height: 200px;
opacity: 0.5;
}
div.imagefix {
height: 200px;
line-height: 250px;
overflow: hidden;
text-align: center;
width: 100%;
}
div.imagefix img {
margin: -50%;
}
<div class="rss-output" style="float:">
<div class="body">
<div class="overlay-feed"></div>
<div class="imagefix" style="float:none;">
<a target="_blank" href="#">
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a>
</div>
</div>
</div>
The problem is with overlay width.
.rss-output .overlay-feed {
background: #000 none repeat scroll 0% 0%;
z-index: 1;
position: absolute;
width: 89%;
height: 200px;
opacity: 0.5;
}
do overlay width 89%.fiddle
Related
<div align="center">
<div class="container2">
<img src="img/3.png" alt="discussion Threads" class="image" height="200px" width="150px">
<div class="overlay">
<div class="text">Here you can discuss different topics and ask or answer questions.</div>
</div>
</div>
<div class="container2">
<img src="download.png" alt="Avatar" class="image">
<div class="overlay overlay2">
<div class="text">Bottom</div>
</div>
</div>
<div class="container2">
<img src="download.png" alt="Avatar" class="image">
<div class="overlay overlay3">
<div class="text">Bottom</div>
</div>
</div>
</div>
i want to make the images next to each other but i can't idk why or how tbh and this is the css i have tried everything it doesn't work
I want 3 images side by side with hover and caption, at the moment I have 3 images going from top to bottom, the hover is good but not side by side. How do I make the images appear side by side? Thanks.
.container2 {
position: relative;
width: 250px;
}
.image {
display: block;
width: 250px;
height: 300px;
height: auto;
margin: 17%;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
margin-left: 17%;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
pointer-events: none
}
.container2:hover .overlay {
height: 85%;
}
.text {
color: white;
font-size: 15px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay2 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
margin-left: 17%;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
pointer-events: none
}
.container2:hover .overlay2 {
height: 85%;
}
.overlay3 {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #4CAF50;
overflow: hidden;
width: 100%;
height: 0;
transition: .5s ease;
margin-left: 17%;
border-top-left-radius: 70px;
border-top-right-radius: 70px;
pointer-events: none
}
.container2:hover .overlay3 {
height: 85%;
}
You would have to add float property to your container2 selector. Please check the css rule below.
.container2 {
float: left;
position: relative;
width: 250px;
}
.container {
width: 400px;
height: 400px;
padding: 0px;
display: grid;
grid-template-columns: auto auto auto;
}
.item {
width: 100px;
height: 200px;
margin: 2px;
}
<div class="container">
<div class="item" style="background-color:red">
</div>
<div class="item" style="background-color:blue">
</div>
<div class="item" style="background-color:yellow">
</div>
</div>
Why don't you grid-display property ?
This might help you
For these such scenarios there is a beautiful/clean/simple concept called flex which is helping by decreasing number of lines of code:
here is the example with column, color and hover effect, hope it helps you:
#MainDiv {
height: 200px;
width: 650px;
display: flex;
/* here is a concept */
flex-direction: row;
/* you can either change it to row/columns */
padding: 5px;
}
#firstDiv {
width: 200px;
margin: 5px;
background-color: red;
}
#secondDiv {
width: 200px;
margin: 5px;
background-color: blue;
}
#thirdDiv {
width: 200px;
margin: 5px;
background-color: green;
}
#firstDiv:hover {
background-color: blue;
color: white;
}
#secondDiv:hover {
background-color: green;
color: white;
}
#thirdDiv:hover {
background-color: red;
color: white;
}
<div id="MainDiv">
<div id="firstDiv">First Div</div>
<div id="secondDiv">Second Div</div>
<div id="thirdDiv">Third Div</div>
</div>
I am trying to add a horizontal scroll onto a page so that when you scroll vertically, the page scrolls horizontally. I found a piece of code that can do this which is entirely CSS based however it doesn't seem to be responsive. I found this on CodePen.
Is there any way in which this code can be transformed into the page being responsive?
I've attached the code below.
#container {
margin-top: -15px;
}
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
}
#container .box>div {
width: 100%;
height: 100%;
font-size: 96px;
color: #FFF;
position: absolute;
top: 5%;
left: 2.6%;
margin: -50px 0 0 -50px;
line-height: .7;
font-weight: bold;
}
#container {
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
width: 100vh;
height: 100vw;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
.one {
background-color: #45CCFF;
}
.two {
background-color: #49E83E;
}
.three {
background-color: #EDDE05;
}
.four {
background-color: #E84B30;
}
<div id="container">
<div id="container2">
<div class="box one">
<div class="full">
<img class="desktop" src="public/images/lookbook/4.jpg" alt="Header" />
</div>
</div>
<div class="box two">
<div>2</div>
</div>
<div class="box three">
<div>3</div>
</div>
<div class="box four">
<div>Last</div>
</div>
</div>
</div>
If anyone has any idea - please let me know!
I took the initiative to remove all those ugly white spaces and scroll bars, plus what you asked for: Codepen
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
#container {
width: calc(100vh + 17px);
height: 100vw;
margin-top: -17px;
margin-right: 100px;
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
}
#container .box > div {
font-size: 96px;
color: #FFF;
position: absolute;
top: 0;
left: 0;
margin: 0;
line-height: 0.9;
font-weight: bold;
}
.full {
height: 100%;
width: 100%;
position: relative;
}
.desktop {
width: 100%;
height: 100%;
display: block;
position: absolute;
background-size: cover;
}
.one {background-color: #45CCFF;}
.two {background-color: #49E83E;}
.three {background-color: #EDDE05;}
.four {background-color: #E84B30;}
Here is the code you want, use the image as a background instead. This allows it to cover the div completely as you'd like it to. Whilst also being responsive.
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
#container .box {
width: 100vw;
height: 100vh;
display: inline-block;
position: relative;
background-size: cover;
}
#container .box>div {
width: 100%;
height: 100%;
font-size: 96px;
color: #FFF;
position: absolute;
top: 5%;
margin: 20px 0px 0px;
line-height: .7;
font-weight: bold;
}
#container {
overflow-y: scroll;
overflow-x: hidden;
transform: rotate(270deg) translateX(-100%);
transform-origin: top left;
background-color: #999;
position: absolute;
width: 100vh;
height: 100vw;
}
#container2 {
transform: rotate(90deg) translateY(-100vh);
transform-origin: top left;
white-space: nowrap;
font-size: 0;
}
.one {
background-color: #45CCFF;
background-image: url(https://images.pexels.com/photos/1022454/pexels-photo-1022454.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
.two {
background-color: #49E83E;
background-image: url(https://images.pexels.com/photos/1023949/pexels-photo-1023949.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
.three {
background-color: #EDDE05;
background-image: url(https://images.pexels.com/photos/963071/pexels-photo-963071.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
.four {
background-color: #E84B30;
background-image: url(https://images.pexels.com/photos/1022928/pexels-photo-1022928.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
}
<div id="container">
<div id="container2">
<div class="box one">
<div class="full">
<div>1</div>
</div>
</div>
<div class="box two">
<div>2</div>
</div>
<div class="box three">
<div>3</div>
</div>
<div class="box four">
<div>Last</div>
</div>
</div>
</div>
In the following code, on hovering over the green button, the blue bar appears.
But when I write the words "About Me" on the about_button div (ie the green button), the shape of the button changes.
How can I successfully write "About Me" on the green button without spoiling the shape of the button?
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow: hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
position: relative;
z-index: 1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width: 400px;
background-color: blue;
display: inline-block;
transform-origin: 0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<div id="page1">
<div id="about">
<div id="about_button"></div>
<div id="about_text">
<p>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
add vertical-align:top to it, because inline-block by default has vertical-align:baseline
body {
margin: 0;
width: 100%;
}
p {
padding: 0 10px;
}
#page1 {
position: relative;
width: 100%;
height: 100%;
background-color: #77d47f;
}
#about {
position: absolute;
left: 5%;
width: 504px;
height: 100px;
overflow: hidden;
}
#about_button {
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
vertical-align:top; /** THIS LINE */
position: relative;
z-index: 1;
}
#about_text {
transition: transform 0.5s;
height: 100px;
width: 400px;
background-color: blue;
display: inline-block;
transform-origin: 0 0;
transform: translateX(-450px);
overflow: hidden;
}
#about {
top: 10%;
}
#about_button:hover + #about_text {
transform: translateX(-4px);
}
<html>
<head>
<link rel="stylesheet" href="design.css">
</head>
<body>
<div id="page1">
<div id="about">
<div id="about_button">About Me</div>
<div id="about_text">
<p>Hi, I am a Computer Science student. I am interested in designing</p>
</div>
</div>
</div>
</body>
</html>
change position on #about_button from relative to absolute
You have the attribute display:inline-block on the button, this forces the shape wrap around the content inside it. Change it to display:block.
I am attempting to build a header across the top-center of the page with two names and a ring in between centered. I also have a picture centered in the middle of the page. Everything looks nice on a full screen laptop until I resize
the browser and everything moves and looks jumbled. I've read a lot of
post and everyone says use a wrapper with a min width and user percentages along with that in your divs. I can't figure this out after a week of reading any
and everything I possibly could.
HTML:
<body>
<div class="wrapper">
<div class="michael">
<p class="m">Michael</p>
<div>
<div class="ringhead">
<img src="Images/gold.gif" class="ring" alt="Wedding Ring" width="100" height="60">
</div>
<div class="christina">
<p class="c">Christina</p>
</div>
<div class="weddingWebsite">
<img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website;">
</div>
</body>
</html>
CSS:
.wrapper {
min-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
.michael{
color:#EEE8AA;
position: fixed;
text-transform: uppercase;
font-size: 30px;
max-width: 100%;
max-height: 100%;
left: 30%;
top: 0%;
}
.m{
max-width: 100%;
max-height 100%;
}
.ringhead{
position: fixed;
max-width: 100%;
max-height: 100%;
left: 50%;
top: 4%;
}
.ring{
max-width: 100%;
max-height: 100%;
}
.christina{
color:#EEE8AA;
position: fixed;
left: 70%;
top: 0%;
text-transform: uppercase;
font-size: 30px;
max-width:100%;
max-height: 100%;
}
.c{
max-width: 100%;
max-height: 100%;
}
body{
background-image: url("Images/Top Banner.jpg"), url("Images/MiddleBanner.jpg"), url("Images/Bottom Banner.png");
background-size: 100% 10%, 100% 15%, 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.weddingWebsite{
position: fixed;
top: 65%;
left: 65%;
transform: translateX(-65%) translateY(-65%);
max-width: 80%;
max-height: 60%;
}
.wedding{
max-width: 80%;
max-height: 60%;
}
It might be easier if you use position: relative; instead of position: absolute;
And you didn't close div class="Michael"> properly you forgot the / in the closing div-tag.
I didn't have the picture but came up with something that works down to 500px in screen width.
HTML:
<div class="wrapper">
<div class="michael">
<p class="m">Michael</p>
</div>
<div class="ringhead">
<img src="Images/gold.gif" class="ring" alt="Wedding Ring" `enter code here`width="100" height="60">
</div>
<div class="christina">
<p class="c">Christina</p>
</div>
<div class="weddingWebsite">
<img class="wedding" src="Images/Wedding Website.jpg" alt="Wedding Website;">
</div>
CSS:
.wrapper {
width: 479px;
height: 100px;
margin: 0 auto;
/* padding: 0 5%; */
display: block;
}
.michael {
color: #EEE8AA;
position: relative;
text-transform: uppercase;
font-size: 30px;
width: 200px;
float: left;
display: inline-block;
border: 1px solid black;
/* max-width: 100%; */
/* max-height: 100%; */
/* left: 30%; */
/* top: 0%; */
}
.m{
max-width: 100%;
max-height 100%;
}
.ringhead {
position: relative;
/* max-width: 100%; */
/* max-height: 100%; */
float: left;
border: 1px solid black;
display: inline-block;
/* left: 50%; */
/* top: 4%; */
}
.ring{
max-width: 100%;
max-height: 100%;
}
.christina {
color: #EEE8AA;
position: relative;
float: left;
border: 1px solid black;
/* top: 0%; */
text-transform: uppercase;
font-size: 30px;
/* max-width: 100%; */
/* max-height: 100%; */
}
.c{
max-width: 100%;
max-height: 100%;
}
body{
background-image: url("Images/Top Banner.jpg"), url("Images/MiddleBanner.jpg"), url("Images/Bottom Banner.png");
background-size: 100% 10%, 100% 15%, 100% 100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
.weddingWebsite{
position: fixed;
top: 65%;
left: 65%;
transform: translateX(-65%) translateY(-65%);
max-width: 80%;
max-height: 60%;
}
.wedding{
max-width: 80%;
max-height: 60%;
}
Here is the link to a fiddle: https://fiddle.jshell.net/hzxsvLzz/1/
I'm trying to center content over a fullscreen slick slider (kenwheeler.github.io/slick/),
I've attempted to use a flex box but the content remains at the edge of the viewport, which appears to be an issue with the position tag of the slick css but I can't figure out what I'm doing wrong.
It's my first time working with flex so maybe I'm missing something?
Website live here
HTML
<div class="wrapper">
<div class="main">
<img class="logo" src="img/logo.png">
<h1>XXXXXX</h1>
<h2>XXXX is a collaboration between XXXX & XXXX</h2>
</div>
<div class="background">
<div class="slide" style="background: url('bg/hlg1.jpg') no-repeat center center"></div>
<div class="slide" style="background: url('bg/hlg2.jpg') no-repeat center center"></div>
<div class="slide" style="background: url('bg/hlg3.jpg') no-repeat center center"></div>
<div class="slide" style="background: url('bg/hlg4.jpg') no-repeat center center"></div>
</div>
CSS
*{
min-height: 0;
min-width: 0;
cursor: crosshair;
}
html{
height: 100%;
min-height: 100%;
}
body{
font-family: sans-serif, "Helvetica", "Arial";
font-weight: bold;
font-size: 62.5%;
color: #fff;
text-align: center;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
background: #000;
min-height: 100%;
overflow: hidden;
}
.wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.slide {
height: 100%;
width: 100%;
background-size: cover !important;
}
.background {
height: 100%;
width: 100%;
z-index: 0;
}
.slick-list,
.slick-track {
height: 100%;
}
.slick-prev {
position: fixed;
left: 2vw;
height: 4vh;
width: 3vw;
z-index: 2;
}
.slick-next {
position: fixed;
right: 2vw;
height: 4vh;
width: 3vw;
z-index: 2;
}
.slick-slider {
margin-bottom: 0;
}
.arrow:hover {
cursor: crosshair;
}
.main {
flex: none;
top: 3vh;
z-index: 1;
max-width: 50%;
position: absolute;
}
.logo {
width: 25vw;
margin: auto;
}
Since that element (main) stays there all the time, you can use these settings:
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 1;
}