I've got an image in the background and I've divided the space into four colored sections. How can I get a section to reduce opacity (which would allow for image in background to show), but also show a colored box with text, WITHOUT the <h2> showing before it is hovered?
This is how I'd like it to look like before hover:
This is how it currently looks like when hovered:
What it currently looks like before hover:
This is my current code:
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
display: block;
height: 100%;
margin: 0 auto;
max-width: 100%;
background-image: url('../images/4.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}
.container {
max-width: 100%;
max-height: 100%;
}
.homePage div {
width: 50%;
height: 50%;
float: left;
}
#tRight {
top: 0;
left: 50%;
right: 0;
bottom: 50%;
background: rgba(67, 70, 75, 1);
}
#tRight:hover {
background: rgba(67, 70, 75, .3);
}
#bLeft {
top: 50%;
left: 0;
right: 50%;
bottom: 0;
background: rgba(251, 201, 80, 1);
}
#bLeft:hover {
background: rgba(251, 201, 80, .3);
}
#bRight {
top: 50%;
left: 50%;
right: 0;
bottom : 0;
background: rgba(186, 77, 25, 1);
}
#bRight:hover {
background: rgba(186, 77, 25, .3);
}
.logo {
position: absolute;
top: 30%;
left: 44%;
z-index: 10;
display: block;
}
.logo:hover {
}
#tLeft {
top: 0;
left: 0;
right: 50%;
bottom 50%;
background: rgba(10, 95, 107, 1);
display: inline-block;
position: relative;
}
#tLeft:hover .hover h2{
transition: opacity .75s ease-out;
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;
background-color: rgba(153,153,153,.9);
padding: 20px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 800;
font-size: 2em;
color: white;
opacity: 1;
}
</style>
</head>
<body class="homePage">
<header>
<img src="asset/images/LOGO.png" class="logo">
</header>
<div id="tLeft" alt="1">
<div class="hover">
<h2><strong>Graphic Design</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </h2>
</div>
</div>
<div id="tRight" alt="1">
</div>
<div id="bLeft" alt="1">
</div>
<div id="bRight" alt="1">
</div>
</body>
Hi ritchieRitchie,
I'm not sure if I correctly understand Your question but here comes a litle bit modified your code in snipped with solution.
Generally I hid text before container div is hovered and when container is hovered change background opacity like in other three. And also added same sample texts to all 4 sections.
html,
body {
height: 100%;
padding: 0;
margin: 0;
display: block;
height: 100%;
margin: 0 auto;
max-width: 100%;
background-image: url('https://s10.postimg.org/dibczxad5/mallard0.png');
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}
.homePage div {
width: 50%;
height: 50%;
float: left;
}
.logo {
position: absolute;
top: 30%;
left: 44%;
z-index: 10;
display: block;
}
.container {
max-width: 100%;
max-height: 100%;
}
#tLeft {
top: 0;
left: 0;
right: 50%;
bottom 50%;
background: rgba(10, 95, 107, 1);
}
#tLeft:hover {
background-color: rgba(10, 95, 107, .3);
}
#tRight {
top: 0;
left: 50%;
right: 0;
bottom: 50%;
background: rgba(67, 70, 75, 1);
}
#tRight:hover {
background: rgba(67, 70, 75, .3);
}
#bLeft {
top: 50%;
left: 0;
right: 50%;
bottom: 0;
background: rgba(251, 201, 80, 1);
}
#bLeft:hover {
background: rgba(251, 201, 80, .3);
}
#bRight {
top: 50%;
left: 50%;
right: 0;
bottom: 0;
background: rgba(186, 77, 25, 1);
}
#bRight:hover {
background: rgba(186, 77, 25, .3);
}
.hover-container {
position: absolute;
}
.hover-container .hover h2 {
visibility: hidden;
}
.hover-container:hover .hover h2 {
visibility: visible;
transition: opacity .75s ease-out;
position: absolute;
top: 15%;
bottom: 15%;
left: 0;
right: 0;
padding: 20px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: 800;
font-size: 1em;
color: white;
background-color: rgba(153, 153, 153, .9);
opacity: 1;
}
<body class="homePage">
<header>
<img src="asset/images/LOGO.png" class="logo">
</header>
<div id="tLeft" class="hover-container" alt="1">
<div class="hover">
<h2><strong>Graphic Design1</strong> Lorem ipsum</h2>
</div>
</div>
<div id="tRight" class="hover-container" alt="1">
<div class="hover">
<h2><strong>Graphic Design2</strong> Lorem ipsum </h2>
</div>
</div>
<div id="bLeft" class="hover-container" alt="1">
<div class="hover">
<h2><strong>Graphic Design3</strong> Lorem ipsum</h2>
</div>
</div>
<div id="bRight" class="hover-container" alt="1">
<div class="hover">
<h2><strong>Graphic Design4</strong> Lorem ipsum</h2>
</div>
</div>
</body>
If You want to hide element and act like it isn't there use display instead of visibility rule:
.hover-container .hover h2 {
display: none;
}
.hover-container:hover .hover h2 {
display: initial;
}
More informations about difference between display and visibility e.g. on W3Schools page.
Cheers
Related
I'm having trouble to make the inner text change on hover colour white. I am using::before: hover.. when I hover entire div could be changed but still text is black Why is my code not working?
.feature {
.feature-rect {
position: relative;
height: 180px;
width: 270px;
border-radius: 20px;
background-color: $light-color;
#include box-shadow($form-shadow);
text-align: center;
margin-bottom: 30px;
padding: 20px;
z-index: 1;
display: block;
}
.feature-rect::before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(180deg, #232153 0%, #6F2365 100%);
z-index: -1;
transition: opacity 0.5s linear;
opacity: 0;
border-radius: 20px;
display: block;
color: #fff;
cursor: pointer;
}
.feature-rect:hover::before {
opacity: 1;
}
.feature-rect:hover{
color:#fff;
}
}
<div class="feature">
<div class="feature-rect">
<img src="{{ config('static.images') }}images/card_feature_icon_2.png">
<div class="title-light-color-font-s mt-10">Lorem Ipsome</div>
<div class="title-content-font-xs mt-10">Lorem Ipsome Lorem Ipsome Lorem Ipsome Lorem Ipsome</div>
</div>
</div>
.feature-rect {
position: relative;
height: 180px;
width: 270px;
border-radius: 20px;
background-color: $light-color;
#include box-shadow($form-shadow);
text-align: center;
margin-bottom: 30px;
padding: 20px;
z-index: 1;
display: block;
}
.feature-rect::before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(180deg, #232153 0%, #6F2365 100%);
z-index: -1;
transition: opacity 0.5s linear;
opacity: 0;
border-radius: 20px;
display: block;
color: #fff;
cursor: pointer;
}
.feature-rect:hover::before {
opacity: 1;
}
.feature-rect:hover{
color:#fff;
}
.feature-rect:hover div{
color:#fff !important;
}
<div class="feature">
<div class="feature-rect">
<img src="{{ config('static.images') }}images/card_feature_icon_2.png">
<div class="title-light-color-font-s mt-10">Lorem Ipsome</div>
<div class="title-content-font-xs mt-10">Lorem Ipsome Lorem Ipsome Lorem Ipsome Lorem Ipsome</div>
</div>
</div>
Nesting (when you have curly braces inside other curly braces) is not a feature of css, only a feature of css pre-processors like sass and less. Therefore you will need to expand the nesting like so:
.feature .feature-rect {
position: relative;
height: 180px;
width: 270px;
border-radius: 20px;
background-color: $light-color;
#include box-shadow($form-shadow);
text-align: center;
margin-bottom: 30px;
padding: 20px;
z-index: 1;
display: block;
}
.feature .feature-rect::before {
position: absolute;
content: "";
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(180deg, #232153 0%, #6F2365 100%);
z-index: -1;
transition: opacity 0.5s linear;
opacity: 0;
border-radius: 20px;
display: block;
color: #fff;
cursor: pointer;
}
.feature .feature-rect:hover::before {
opacity: 1;
}
.feature .feature-rect:hover{
color:#fff;
}
<div class="feature">
<div class="feature-rect">
<img src="{{ config('static.images') }}images/card_feature_icon_2.png">
<div class="title-light-color-font-s mt-10">Lorem Ipsome</div>
<div class="title-content-font-xs mt-10">Lorem Ipsome Lorem Ipsome Lorem Ipsome Lorem Ipsome</div>
</div>
</div>
How can I make the image always contain perfectly inside the container as the exact same height and width?
.container {
width: 500px!important;
height: 800px!important;
}
.container:before {
content: "";
background: rgba(0, 0, 0, 0.2);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
width: 500px;
height: 800px;
}
.content_holder {
position: absolute;
bottom: 0;
padding: 5%;
}
.custom_container .content_holder h3 {
color: #fff!important;
}
.custom_container .content_holder p {
color: #fff!important;
}
<div class="container">
<img src="http://wrighthand.uk.w3pcloud.com/wp-content/uploads/2018/03/shutterstock_1016869756.jpg" />
<div class="content_holder">
<p>Subject</p>
<h3>Container Title</h3>
<a class="button">Learn more</a>
</div>
</div>
For some reason the image doesn't sit in the container like on the website i tried to add it to.
http://wrighthand.uk.w3pcloud.com
Try this:
.container {
width: 500px!important;
height: 800px!important;
}
.container:before {
content: "";
background: rgba(0,0,0,0.2);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
width: 500px;
height: 800px;
}
.content_holder {
position: absolute;
bottom: 0;
padding: 5%;
}
.custom_container .content_holder h3 {
color:#fff!important;
}
.custom_container .content_holder p {
color:#fff!important;
}
<div class="container">
<img src="http://wrighthand.uk.w3pcloud.com/wp-content/uploads/2018/03/shutterstock_1016869756.jpg" width="100%" height="100%"/>
<div class="content_holder">
<p>Subject</p>
<h3>Container Title</h3>
<a class="button">Learn more</a>
</div>
</div>
It now fits perfectly. (It's a bit distorted, however...)
You can put your image as a background of the container and then use background positioning properties such as,
background-image: url('http://wrighthand.uk.w3pcloud.com/wp-content/uploads/2018/03/shutterstock_1016869756.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
.container {
width: 500px;
height: 800px;
background-image: url('http://wrighthand.uk.w3pcloud.com/wp-content/uploads/2018/03/shutterstock_1016869756.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative;
}
.container:before {
content: "";
background: rgba(0, 0, 0, 0.2);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
}
.content_holder {
position: absolute;
bottom: 0;
padding: 5%;
color: #fff;
}
a {
color: inherit;
}
<div class="container">
<div class="content_holder">
<p>Subject</p>
<h3>Container Title</h3>
<a class="button">Learn more</a>
</div>
</div>
I have a division with class "centre" inside another division called "parallaxOne". With my css, if I view it in my laptop, it is showing the divisions properly, but if I view it in a mobile phone, the "centre" division is appearing outside the "parallaxOne" division, and in other browsers, it is appearing in front of the text. Why is this happening, and how do I correct it? Here is my code:
.centre {
position: absolute;
top: 75%;
left: 50%;
transform: translateY(-15%);
width: 0;
height: 140px;
border-left: 6px dashed #0079a5;
}
.arrow {
position: absolute;
top: 0;
left: -6px;
height: 40px;
width: 6px;
background: #007;
animation: animate 2s infinite;
}
.arrow:before {
content: '';
position: absolute;
bottom: 0;
left: -10px;
width: 20px;
height: 20px;
border-bottom: 6px solid #007;
border-right: 6px solid #007;
transform: rotate(45deg);
}
#keyframes animate {
0% {
transform: translateY(0);
opacity: 0.5;
}
50% {
transform: translateY(70px);
opacity: 1;
}
100% {
transform: translateY(140px);
opacity: 0;
}
}
.container {
max-width: inherit;
margin: 0 auto;
background-color: white;
font-size: 24px;
padding: 25px;
}
.parallaxOne {
background: /*url(images/parallax3.jpg); This is an image in my computer*/yellow;
text-align: center;
height: 450px;
padding: 2%;
margin: 2% 0;
}
.parallaxOne h6 {
color: black;
font-size: 200%;
margin: 8% 30%;
padding-top: 100px;
z-index: -1;
}
.parallaxTwo {
background: /*url('images/parallax2.jpg') no-repeat center; This is an image in my computer*/green;
background-size: cover;
background-attachment: fixed;
text-align: center;
height: 600px;
padding: 2%;
}
<html>
<head>
<title>My website</title>
</head>
<body>
<header>
<h1>My website</h1>
</header>
<div class="container">
<div class="parallaxOne">
<h3>Welcome to my website!</h3>
<div class="centre">
<div class="arrow"></div>
</div>
</div>
<div class="parallaxTwo">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</body>
</html
I'm sorry for the long code, but I edited it as much as I could to reproduce the same problem.
Use this tag in your head section for responsive scaling your contents
<meta name="viewport" content="width=device-width, initial-scale=1">
Could some one bring me on track? How could I make that wave on the bottom of the header?
This is what I have so far: https://codepen.io/zimex/pen/XaQjZL
<header id="header">
<div class="container">
<div class="logo">
</div>
<div class="mobile-wrap">
<div class="inner">
<div class="user">
<div class="wrap">
<span>Hi</span>
</div>
</div>
<div class="nav">
<ul>
<li>Menu</li>
<li>Items</li>
<li>Are</li>
<li>Located</li>
<li>Here</li>
</ul>
</div>
</div>
</div>
<div class="burger">
<span></span>
</div>
</div>
</header>
1) you can use img for this - bad solution but work
2) check http://dev.wavemaker.com/wiki/bin/wmdoc_6.3/CSS
3)
html, body {
height: 100%;
}
html {
background: #eee;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.box {
width: 300px;
height: 300px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(black, .2);
background: lighten(#f0f4c3, 10%);
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
}
.wave {
opacity: .4;
position: absolute;
top: 3%;
left: 50%;
background: #0af;
width: 500px;
height: 500px;
margin-left: -250px;
margin-top: -250px;
transform-origin: 50% 48%;
border-radius: 43%;
animation: drift 3000ms infinite linear;
}
.wave.-three {
animation: drift 5000ms infinite linear;
}
.wave.-two {
animation: drift 7000ms infinite linear;
opacity: .1;
background: yellow;
}
.box:after {
content: '';
display: block;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5));
z-index: 11;
transform: translate3d(0, 0, 0);
}
.title {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
line-height: 300px;
text-align: center;
transform: translate3d(0, 0, 0);
color: white;
text-transform: uppercase;
font-family: 'Playfair Display', serif;
letter-spacing: .4em;
font-size: 24px;
text-shadow: 0 1px 0 rgba(black, .1);
text-indent: .3em;
}
#keyframes drift {
from { transform: rotate(0deg); }
from { transform: rotate(360deg); }
}
sample
The first image is how it looks (correctly) in google chrome, the second image is how it looks (incorrectly) in firefox.
Any tips that might help me resolve this in firefox? Thank you.
<div class="container">
<div id="top">
<div class="top-bar">
<div id="logo"></div>
<div class="top-bar-red-stripe">
<ul class="top-bar-social-btns">
<li>facebook</li>
<li>facebook</li>
</ul>
</div>
</div><!-- /.top-bar -->
<div id="top-left-content">
<h3>This is a title</h3>
<div class="race-drivers"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
</div>
<div id="video-content">
<h3>LATEST WEBISODE</h3>
<div class="video-file"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing</p>
View all webisodes
</div>
<div id="vote-content">
<h3>VOTE FOR WHAT HAPPENS NEXT</h3>
<div class="vote-bar">
Enhancements
Compass
Activities
Vote
</div>
</div><!-- #vote-content -->
</div><!-- /#top -->
</div><!-- /.container -->
.container {
width: 960px;
margin: 0 auto;
border: #outside-border;
#top {
background: #000 url('../images/top_background.jpg') no-repeat;
height: 505px;
#video-content {
position: absolute;
margin: 0;
padding: 0;
top: 85px;
right: 239px;
border: 1px solid red;
width: 500px;
h3 {
margin: 0;
}
p {
margin: 0;
}
.video-file {
position: absolute;
background: #ccc;
border: 2px solid #3592cd;
width: 400px;
height: 240px;
}// .video-file
a.all-webisodes-btn:link, a.all-webisodes-btn:visited {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
background: transparent url('../images/all-webisodes-btn.png') no-repeat;
width: 88px;
height: 65px;
position: absolute;
top: 107px;
right: -2px;
}// .all-webisodes-btn
}// #video-content
#vote-content {
width: 442px;
position: absolute;
top: 328px;
right: -523px;
position: relative;
h3 {
margin: 0 0 0 15px;
}
.vote-bar {
position: relative;
//border:1px solid red;
background: transparent url('../images/vote-bar-bg.png') no-repeat;
width: 438px;
height: 73px;
position: relative;
a:link, a:visited {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
}
a.vote-enhancements:link, a.vote-enhancements:visited {
background: transparent url('../images/enhancements_btn.png') no-repeat;
width: 86px;
height: 42px;
position: relative;
top: 10px;
left: 170px;
}
a.vote-compass:link, a.vote-compass:visited {
background: transparent url('../images/compass_btn.png') no-repeat;
width: 52px;
height: 42px;
position: relative;
top: 10px;
left: 190px;
}
a.vote-activities:link, a.vote-activities:visited {
background: transparent url('../images/activities_btn.png') no-repeat;
width: 56px;
height: 42px;
position: relative;
top: 10px;
left: 210px;
}
a.vote-btn:link, a.vote-btn:visited {
background: transparent url('../images/vote-now-btn.png') no-repeat;
width: 141px;
height: 34px;
position: relative;
top: 47px;
left: 73px;
}
}// .vote-bar
}// .vote-content
}// #top
}// .container
UPDATE: fixed, set position to relative for #video-content and set position to absolute for children elements
#video-content {
width: 500px;
position: relative;
top: 10px;
left: 459px;
h3 {
margin: 0;
}
.video-file {
position: absolute;
background: #ccc;
border: 2px solid #3592cd;
width: 400px;
height: 240px;
}// .video-file
a.all-webisodes-btn:link, a.all-webisodes-btn:visited {
display: inline-block;
overflow: hidden;
text-indent: -9999px;
background: transparent url('../images/all-webisodes-btn.png') no-repeat;
width: 88px;
height: 65px;
position: absolute;
top: 100px;
right: -3px;
}// .all-webisodes-btn
}// #video-content
It looks like the #video-content element might have margin in Firefox. That should be removed before absolute positioning elements.
Try this at the beginning of your CSS:
* { margin: 0; padding: 0px; }