The image is cut off a bit and the text to the left isn’t centering also I tried to add a min-height to the pics and max-width to banner image for responsiveness but they didn’t take. any tips on these?
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Comfortaa', cursive;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
h1 {
font-family: 'Righteous', cursive;
font-size: 4rem;
}
img {
width: 100%;
}
header {
height: 8vh;
width: 90%;
margin: 0 auto;
}
.nav-links {
height: 8vh;
width: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
.nav-link:hover {
border-bottom: 4px black solid;
}
.banner {
background-image: url(/Aleesha/woman\ wit\ hat.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
height: 30vh;
margin-bottom: 2vh;
}
.hats {
display: flex;
height: 40vh;
}
.hat-text {
border: 2px dotted;
flex: 1;
display: flex;
}
h2 {
width: 100%;
border: 2px dotted;
font-size: 8rem;
align-items: center;
}
#slider {
flex: 1.8;
overflow: hidden;
}
#slider figure {
position: relative;
width: 500%;
margin: 0;
left: 0;
animation: 20s slider infinite;
}
#slider figure img {
width: 100%;
float: left;
max-width: 20%;
min-height: 100%;
object-fit: contain;
}
#keyframes slider {
0% {
left: 0;
}
20% {
left: 0;
}
25% {
left: -100%;
}
45% {
left: -100%;
}
50% {
left: -200%;
}
70% {
left: -200%;
}
75% {
left: -300%;
}
95% {
left: -300%;
}
100% {
left: -400%;
}
}
<html>
<body>
<main>
<!--BANNER-->
<section class="banner">
<div class="container">
<div class="banner-content">
<h1>ALEESHA</h1>
</div>
</div>
</section>
<!--HATS-->
<section class="hats">
<div class="hat-text">
<H2>HATS</H2>
</div>
<div id="slider">
<figure>
<img src="/Aleesha/Pics/Slideshow/Hats/slide1.jpg" alt="Black Reptile Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide2.jpg" alt="Cheeta Squence Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide3.jpg" alt="White Thug Life Bucket Hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide4.jpg" alt="yellow W worn blue hat">
<img src="/Aleesha/Pics/Slideshow/Hats/slide1.jpg" alt="Life is Fantastic yellow hat">
</figure>
</div>
</section>
</main>
</body>
</html>
Related
I need help to find the script to use hover on different classes sharing theirs string start like that ( i didn't copy img but it's a picture within the div by the .image_produit tag classes):
.image_produit1
{
background: url('Pic1.jpg') no-repeat;
background-position: center;
background-size: contain;
top: 0px;
}
.image_produit2
{
background: url('Pic2.jpg') no-repeat;
background-position: center;
background-size: contain;
top: 0px;
}
.image_produit:hover img
{
visibility:visible;
}
Here is what you are looking for and I don't recommend:
div {
position: relative;
width: 100px;
height: 100px
}
div h1 {
position: relative;
z-index: 2;
font-size: 15px;
color: blue
}
div img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
visibility: hidden;
}
.image_produit1 {
background: url('https://placekitten.com/200/200') no-repeat;
background-position: center;
background-size: contain;
top: 0px;
}
.image_produit2 {
background: url('https://placekitten.com/300/300') no-repeat;
background-position: center;
background-size: contain;
top: 0px;
}
div[class^="image_prod"]:hover img {
visibility: visible;
}
<div class='image_produit1'>
<h1>Product A</h1>
<img src="https://placekitten.com/100/100">
</div>
<div class='image_produit2'>
<h1>Product B</h1>
<img src="https://placekitten.com/100/100">
</div>
Here is the correct way to implement this:
.product {
position: relative;
width: 100px;
height: 100px
}
.product h1 {
position: relative;
z-index: 3;
font-size: 15px;
color: blue
}
.product img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.product img.seconday {
z-index: 2;
visibility: hidden;
}
.product:hover img.seconday {
visibility: visible;
}
<div class='product'>
<h1>Product A</h1>
<img src="https://placekitten.com/200/200">
<img src="https://placekitten.com/100/100" class='seconday'>
</div>
<div class='product'>
<h1>Product B</h1>
<img src="https://placekitten.com/300/300">
<img src="https://placekitten.com/100/100" class='seconday'>
</div>
I am trying to add a sliding hover filter effect to image. My original filter is grayscale(1).
So I need to the filter to transition with direction instead of the Slider overlay effect to have it to become colored: "grayscale(0)".
Basically i want the filter to be affected.
Is it possible?
Thank you in advance.
* {
box-sizing: border-box;
}
body {
background: #fefefe;
color: #333;
font: 14px/1.5 "Fira Sans", sans-serif;
}
h1 {
font-size: 2.5rem;
font-weight: 300;
margin: 1.5em 0.5rem 1em;
text-align: center;
}
.container {
margin: 0 auto;
padding: 2rem;
max-width: 1200px;
}
.row {
display: flex;
}
.col {
color: #fff;
flex: 1 1 auto;
min-height: 260px;
position: relative;
}
.col h2 {
font-weight: 300;
font-size: 1.33333rem;
line-height: 1.25;
margin: 0;
position: absolute;
bottom: 1.5rem;
right: 1.5rem;
z-index: 0;
}
.col:nth-child(2) {
min-width: 20%;
}
.col:nth-child(4) {
min-width: 33%;
}
.col:nth-child(3)+.col:nth-child(3) {
min-width: 50%;
}
.img-container {
background: #0f0523 50% 50%/cover;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: 1s;
transform-origin: bottom right;
filter: grayscale(1);
}
.img-container::before {
background: linear-gradient(transparent, rgba(67, 17, 51, 0.5), #000320);
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.col:hover .photo-container {
transform: scale(1.25);
}
.slide {
background: rgba(0, 0, 0, 0.4);
padding: 0 1.5rem;
}
/* THE EFFECT */
.col {
overflow: hidden;
position: relative;
}
.slide {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 0.275s ease-in-out, visibility 0s 0.275s;
visibility: hidden;
will-change: transform;
transform: translateY(100%);
}
.row:hover~.row .slide {
transform: translateY(-100%);
}
.row:hover .slide {
transform: translateX(100%);
}
.row:hover .col:hover~.col .slide {
transform: translateX(-100%);
}
.row:hover .col:hover .slide {
transform: none;
visibility: visible;
transition-delay: 0s;
}
<div class="container">
<div class="row">
<div class="col">
<div class="img-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=80);"></div>
<h2>1 </h2>
<div class="slide"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="img-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=212);"></div>
<h2>2 </h2>
<div class="slide"></div>
</div>
<div class="col">
<div class="img-container" style="background-image:url(https://source.unsplash.com/600x250/?sig=242);"></div>
<h2>3 </h2>
<div class="slide"></div>
</div>
Here is an idea using mask where you can animate the mask-position. You can also rely on pseudo element for the image to avoid extra elements. The trick is to have two images above each other and we adjust the masking on the top to show the bottom one.
I removed the text to keep only the code related to the filter effect:
* {
box-sizing: border-box;
}
body {
background: #fefefe;
}
.container {
margin: 0 auto;
padding: 2rem;
max-width: 1200px;
}
.row {
display: flex;
}
.col {
color: #fff;
flex: 1 1 auto;
min-height: 260px;
position: relative;
}
.img-container {
background-size:0 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.img-container::before,
.img-container::after {
content: "";
background-image: inherit;
background-size:cover;
background-position:center;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.img-container::before {
filter: grayscale(1);
}
.img-container::after {
transition: all 0.275s ease-in-out, visibility 0s 0.275s;
visibility: hidden;
-webkit-mask: linear-gradient(#fff,#fff);
-webkit-mask-size: 200% 200%;
-webkit-mask-position:left 0 bottom 200%;
-webkit-mask-repeat: no-repeat;
mask: linear-gradient(#fff,#fff);
mask-size: 200% 200%;
mask-position:left 0 bottom 200%;
mask-repeat: no-repeat;
}
.row:hover~.row .img-container::after {
-webkit-mask-position:left 0 top 200%;
mask-position:left 0 top 200%;
}
.row:hover .img-container::after {
-webkit-mask-position:right 200% top 0;
mask-position:right 200% top 0;
}
.row:hover .col:hover~.col .img-container::after {
-webkit-mask-position:left 200% top 0;
mask-position:left 200% top 0;
}
.row:hover .col:hover .img-container::after {
visibility: visible;
transition-delay: 0s;
-webkit-mask-position:0 0%;
mask-position:0 0%;
}
<div class="container">
<div class="row">
<div class="col">
<div class="img-container" style="background-image:url(https://picsum.photos/id/1012/800/800);"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="img-container" style="background-image:url(https://picsum.photos/id/1014/800/800);"></div>
</div>
<div class="col">
<div class="img-container" style="background-image:url(https://picsum.photos/id/16/800/800);"></div>
</div>
</div>
</div>
mask in this case works the same way as background so you can check this question/answer to get more details about the calculation: Using percentage values with background-position on a linear gradient
Changing mask with background to better see the trick:
* {
box-sizing: border-box;
}
body {
background: grey;
}
.container {
margin: 0 auto;
padding: 2rem;
max-width: 1200px;
}
.row {
display: flex;
}
.col {
color: #fff;
flex: 1 1 auto;
min-height: 260px;
position: relative;
}
.col:nth-child(2) {
min-width: 20%;
}
.col:nth-child(4) {
min-width: 33%;
}
.col:nth-child(3)+.col:nth-child(3) {
min-width: 50%;
}
.img-container {
background-position:center;
background-size:0 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: 1s;
transform-origin: bottom right;
}
.img-container::before {
background: inherit;
background-size:cover;
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
filter: grayscale(1);
}
.img-container::after {
content:"";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: all 0.275s ease-in-out, visibility 0s 0.275s;
visibility: hidden;
background: linear-gradient(#fff,#fff);
background-size: 200% 200%;
background-position:left 0 bottom 200%;
background-repeat: no-repeat;
}
.col {
overflow: hidden;
position: relative;
}
.row:hover~.row .img-container::after {
background-position:left 0 top 200%;
}
.row:hover .img-container::after {
background-position:right 200% top 0;
}
.row:hover .col:hover~.col .img-container::after {
background-position:left 200% top 0;
}
.row:hover .col:hover .img-container::after {
visibility: visible;
transition-delay: 0s;
background-position:0 0%;
}
<div class="container">
<div class="row">
<div class="col">
<div class="img-container" style="background-image:url(https://picsum.photos/id/1012/800/800);"></div>
</div>
</div>
<div class="row">
<div class="col">
<div class="img-container" style="background-image:url(https://picsum.photos/id/1014/800/800);"></div>
</div>
<div class="col">
<div class="img-container" style="background-image:url(https://picsum.photos/id/16/800/800);"></div>
</div>
</div>
</div>
Basically the white color is the visible part of the image, so sliding it will make our image without filter visible.
I am trying to position two SVG images (Tobias-Raketfart.svg class="turbotobias-shake turbotobias-rocket-img" & TurboTobias-Blue-clouds.svg class="turbotobias-smoke"). Everytime I come up with a solution it is nowhere near being responsive.
I've been playing around with position: absolute; and then positioning with bottom and right. This makes the result looks good on my PC monitor but awful on pretty much any other screen. What can I do in order to position the two SVG images?
Mobile mockup of end result I am trying to achieve
PC mockup of end result I am trying to achieve
HTML:
<body>
<div class='turbotobias-hero-section-wrapper'>
<div class='turbotobias-row'>
<div class='turbotobias-column'>
<div class='turbotobias-first-column'>
<h1 class="turbotobias-fp-h1">Vil du have
<div class="turbotobias-h1-enhanced">raketfart</div>
<div class="turbotobias-h1-smaller">på din hjemmeside?</div>
</h1>
<span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
</div>
</div>
<div class='turbotobias-column'>
<div class='turbotobias-second-column'>
<img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt="" class="turbotobias-shake turbotobias-rocket-img">
<img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt="" class="turbotobias-smoke"></img>
</div>
</div>
<div class="turbotobias-divider-clouds"></div>
</div>
</div>
</body>
CSS:
body {
background: #fff;
color: #333333;
margin: 0;
box-sizing: border-box;
font-family: open sans,Arial,sans-serif;
font-size: 14px;
overflow: hidden;
word-break: break-word;
}
.turbotobias-hero-section-wrapper {
height: 100vh;
background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.turbotobias-column .turbotobias-first-column {
display: flex;
align-self: center;
align-items: center;
flex-direction: column;
}
.turbotobias-first-column {
font-weight: 700;
text-transform: uppercase;
background-color: rgba(0,0,0,0);
border-left-width: 10px;
border-left-style: solid;
border-left-color: #0082a4;
padding-top: 20px!important;
padding-bottom: 20px!important;
padding-left: 20px!important;
margin-top: 0px!important;
display: flex;
align-items: center;
}
.turbotobias-h1-enhanced {
font-weight: 900;
font-size: 120%;
}
.turbotobias-h1-smaller {
font-size: 70%;
}
#media (min-width: 980px) {
h1.turbotobias-fp-h1 {
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
font-weight: 700;
font-size: 60px !important;
color: #303030!important;
line-height: 1em;
text-transform: uppercase;
}
}
#media (max-width: 979px) {
h1.turbotobias-fp-h1 {
padding-bottom: 0px;
margin-bottom: 0px;
margin-top: 0px;
font-weight: 700;
font-size: 33px !important;
color: #303030!important;
line-height: 1em;
text-transform: uppercase;
}
}
.turbotobias-sub-h1 {
font-size: 24px;
color: #303030;
font-weight: 400;
font-family: open sans,Arial,sans-serif;
text-transform: uppercase;
text-align: left;
}
.turbotobias-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 80%;
max-width: 1080px;
height: 100vh;
margin: auto;
}
.turbotobias-column {
display: flex;
flex-direction: column;
flex-basis: 100%;
}
.turbotobias-smoke {
position:absolute;
bottom: 0;
width: 470px;
height: auto;
z-index: 9;
right: 30%;
}
.turbotobias-rocket-img {
position: absolute;
bottom: 30%;
right: 36%;
width: 180px;
height: auto;
z-index: 11;
}
.turbotobias-divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
left: 0;
height: 100px;
position: absolute;
width: 100%;
z-index: 10;
}
#media screen and (min-width: 800px) {
.turbotobias-column {
align-self: center;
flex: 1
}
}
#media (max-width: 980px) {
.turbotobias-row {
padding: 30px 0;
}
}
Code snippet
Some changes have been made. The question is, why does not the cloud appear? - Light-Above-clouds-HD-TurboTobias.jpg
Div with the class turbotobias-second-column should always center two svg and you should only control it.
body {
background: #fff;
color: #333333;
margin: 0;
font-family: open sans, Arial, sans-serif;
font-size: 14px;
overflow: hidden;
}
.turbotobias-hero-section-wrapper {
height: 100vh;
background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
}
.turbotobias-first-column {
text-transform: uppercase;
border-left: 10px solid #0082a4;
padding: 20px 0 20px 20px;
margin-top: 0;
font-weight: 700;
}
#media (max-width: 799px) {
.turbotobias-first-column {
text-align: center;
}
}
.turbotobias-fp-h1 {
margin: 0 0 20px 0;
font-size: calc(12px + 2vw);
font-weight: 600;
line-height: 90%;
}
.turbotobias-h1-enhanced {
font-size: calc(24px + 2vw);
font-weight: 900;
line-height: 100%;
}
.turbotobias-h1-smaller {
font-size: calc(17px + 1vw);
font-weight: 600;
}
.turbotobias-sub-h1 {
font-size: calc(14px + 0.5vw);
font-weight: 400;
}
.turbotobias-sub-h1 {
color: #303030;
}
.turbotobias-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 80%;
max-width: 1080px;
height: 100vh;
margin: auto;
}
.turbotobias-column {
display: flex;
flex-direction: column;
flex-basis: 100%;
}
.turbotobias-second-column {
display: flex;
justify-content: center;
max-width: 470px;
margin: auto;
}
.turbotobias-rocket-img {
bottom: 30%;
width: 180px;
height: auto;
z-index: 11;
}
.turbotobias-smoke {
position: absolute;
bottom: 0;
max-width: 470px;
height: auto;
z-index: 9;
}
.turbotobias-shake {
animation: shake 2s infinite cubic-bezier(0.79, 0.04, 0.39, 0.81) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
#media (max-width: 790px) {
.turbotobias-rocket-img {
z-index: 2;
max-width: 420px;
}
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(1px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-2px, 0, 0);
}
40%,
60% {
transform: translate3d(2px, 0, 0);
}
}
.turbotobias-divider-clouds {
background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
background-size: cover;
background-position: center top;
bottom: 0;
left: 0;
height: 100px;
position: absolute;
width: 100%;
z-index: 10;
}
#media (min-width: 800px) {
.turbotobias-column {
align-self: center;
flex: 1
}
}
#media (max-width: 980px) {
.turbotobias-row {
padding: 30px 0;
}
}
<div class='turbotobias-hero-section-wrapper'>
<div class='turbotobias-row'>
<div class='turbotobias-column'>
<div class='turbotobias-first-column'>
<h1 class="turbotobias-fp-h1">Vil du have
<div class="turbotobias-h1-enhanced">raketfart</div>
<div class="turbotobias-h1-smaller">på din hjemmeside?</div>
</h1>
<span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
</div>
</div>
<div class='turbotobias-column'>
<div class='turbotobias-second-column'>
<img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt=""
class="turbotobias-shake turbotobias-rocket-img">
<img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt=""
class="turbotobias-smoke"></img>
</div>
</div>
<div class="turbotobias-divider-clouds"></div>
</div>
</div>
I'm trying to add align="center" to this card that is from Material Design Lite:
<main class="mdl-layout__content" align="center">
<div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">
<strong>FOOBAR TEXT</strong>
</h2>
</div>
<div class="mdl-card__supporting-text"></div>
</div>
I've tried adding it at each one of these divs both all together and separately and the contents with my card still won't center.
This is what it looks like from my end:
The text in the center are actually MDL buttons that appear to be text until you mouse hover over them and they "pop out" to be a button (just a bell and whistle component). As you can see, "California" isn't quite centered, and quite frankly neither are the buttons (despite the main class element containing align="center").
I am using the MDL Portfolio Template:
Preview of the template
Download link of the template
Here is the CSS as requested:
.portfolio-max-width {
max-width: 900px;
margin: auto;
justify-content: center;
}
.portfolio-header {
position: relative;
background-image: url(images/header-bg.jpg);
}
.portfolio-header .mdl-layout__header-row {
padding: 0;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.mdl-layout__title {
font-size: 14px;
text-align: center;
font-weight: 300;
}
.is-compact .mdl-layout__title span {
display: none;
}
.portfolio-logo-row {
min-height: 200px;
}
.is-compact .portfolio-logo-row {
min-height: auto;
}
.portfolio-logo {
background: url(images/logo.png) 50% no-repeat;
background-size: cover;
height: 150px;
width: 150px;
margin: auto auto 10px;
}
.is-compact .portfolio-logo {
height: 50px;
width: 50px;
margin-top: 7px;
}
.portfolio-navigation-row {
background-color: rgba(0, 0, 0, 0.08);
text-transform: uppercase;
height: 45px;
}
.portfolio-navigation-row .mdl-navigation {
text-align: center;
max-width: 900px;
width: 100%;
}
.portfolio-navigation-row .mdl-navigation__link {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
line-height: 42px;
}
.portfolio-header .mdl-layout__drawer-button {
background-color: rgba(197, 197, 197, 0.44);
}
.portfolio-navigation-row .is-active {
position: relative;
font-weight: bold;
}
.portfolio-navigation-row .is-active:after {
content: "";
width: 70%;
height: 2px;
display: block;
position: absolute;
bottom: 0;
left: 0;
background-color: rgb(255,64,129);
left: 15%;
}
.portfolio-card .mdl-card__title {
padding-bottom: 0;
}
.portfolio-blog-card-full-bg {
background: url(images/example-blog03.jpg) center / cover;
}
.portfolio-blog-card-event-bg {
background: url(images/example-blog05.jpg) center / cover;
}
.portfolio-blog-card-strip-bg {
background: url(images/example-blog06.jpg) center / cover;
}
.portfolio-blog-card-compact .mdl-card__title {
padding-bottom: 0;
}
.portfolio-blog-card-bg > .mdl-card__actions {
height: 52px;
padding: 16px;
background: rgba(0, 0, 0, 0.2);
}
img.article-image {
width: 100%;
height: auto;
}
.portfolio-max-width {
max-width: 900px;
margin: auto;
}
.portfolio-copy {
max-width: 700px;
}
.no-padding {
padding: 0;
}
.no-left-padding{
padding-left: 0;
}
.no-bottom-padding {
padding-bottom: 0;
}
.padding-top {
padding: 10px 0 0;
}
.portfolio-share-btn {
position: relative;
float: right;
top: -4px;
}
.demo-card-event > .mdl-card__actions {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.portfolio-contact .mdl-textfield {
width: 100%;
}
.portfolio-contact form {
max-width: 550px;
margin: auto;
}
footer {
background-image: url(images/footer-background.png);
background-size: cover;
}
use the css text-align property
.card
{
width:270px;
height:250px;
padding:2px;
text-align:center;
box-shadow:1px 1px 2px #333;
font-family:Liberation Sans;
}
<div class="card">
<div class="card-header">
<h4>CALIFORNIA</h4>
</div>
<div class="card-body">
<strong><p>xxxxxxxxx</p></strong>
<strong><p>xxxxxxxxxxx</p></strong>
<strong><p>xxxxxxxxxxx</p></strong>
<strong><p>xxxxxxxxx</p></strong>
</div>
</div>
Here is a link to my problem http://jsfiddle.net/xb3qkwpp/3/a
When you hover over the green area it starts to flicker when I move the mouse. I am thinking it is z-index but I have set the z-index for the class and ids and it didnt work or maybe I am doing it incorrectly.
html:
<div id="first_area_max" class="first_area">
<div class="first_area_wrapper">
<h2>
FIRST
</h2>
<h1>
foo
</h1>
<p class="tk-proxima-nova">
“I started out in concrete whenI was 18 years old and havebeen at this business for almost20 years. Our team isprofessional, knowledgeable,and will go full throttle everyday for our clients.”
</p>
</div>
</div>
<div id="second_area_max" class="second_area">
<div class="second_area_wrapper">
<h2>
SECOND
</h2>
<h1>
foo
</h1>
<p class="tk-proxima-nova">
“I started out in concrete whenI was 18 years old and havebeen at this business for almost20 years. Our team isprofessional, knowledgeable,and will go full throttle everyday for our clients.”
</p>
</div>
</div>
<div id="third_area_max" class="third_area">
<div class="third_area_wrapper">
<h2>
THIRD
</h2>
<h1>
foo
</h1>
<p class="tk-proxima-nova">
“I started out in concrete whenI was 18 years old and havebeen at this business for almost20 years. Our team isprofessional, knowledgeable,and will go full throttle everyday for our clients.”
</p>
</div>
css:
html, body {
margin: 0 auto;
background-color: black; }
h1, h2, h3 {
font-weight: normal; }
a {
text-decoration: none;
color: inherit; }
ul {
list-style-type: none;
padding: 0; }
.no-padding {
padding: 0; }
.no-margin {
margin: 0; }
.clear {
clear: both; }
.first_boss {
background: blue;
opacity: 0.7;
}
.second_boss {
background: red;
opacity: 0.7;
}
.third_boss {
background: green;
opacity: 0.7;
}
.first_page, .second_page, .third_page, .fifth_page {
background-size: cover;
background-repeat: no-repeat;
height: 800px;
max-width: 1300px; }
.first_page, .second_page, .third_page, .fifth_page {
min-width: 1000px;
background-position: center center;
margin: 0 auto; }
.fifth_page {
background-image: image-url("fifth_page.jpg");
z-index: -1;
z-index: -1; }
.fifth_page h1 {
margin-top: 0;
font-size: 40px; }
.fifth_page h1, .fifth_page h2 {
font-family: 'mohaveregular'; }
.fifth_page p {
width: 230px;
line-height: 2em;
float: right; }
.first_area, .second_area, .third_area {
color: white;
padding: 50px;
width: 500px;
height: 700px;
text-align: right;
position: relative;
top: 0px;
float: right;
background-image: image-url("owner_bg.png"); }
.first_area p, .second_area p, .third_area p {
width: 230px;
line-height: 2em;
float: right; }
#first_area_max, #second_area_max, #third_area_max {
margin-right: -850px;
z-index: 1; }
#first_mouse:hover ~ #first_area_max, #second_mouse:hover ~ #second_area_max, #third_mouse:hover ~ #third_area_max {
right: 1000px;
width: 1px;
z-index: 1;
display: block;
overflow: visible; }
.first_boss, .second_boss, .third_boss {
float: left;
height: 800px;
width: 33%;
z-index: -2; }
.first_area_wrapper, .second_area_wrapper, .third_area_wrapper {
margin-right: 70px; }
#third_area_max {
z-index: 1000; }
.text-area {
padding: 20px;
background-repeat: no-repeat;
color: white;
line-height: 1.4em;
text-transform: uppercase; }
.clear {
clear: both; }
You need to hover on the div you put on top of it as well. Because of the appearing div you lose focus on the first one, causing your hover state to switch rapidly.
.div1 {
display: block;
position: absolute;
width: 200px;
height: 200px;
background: red;
}
.div2 {
display: none;
position: absolute;
width: 200px;
height: 200px;
background: blue;
}
.div1:hover ~ .div2,
.div2:hover {
display: block;
}
<div class="div1"></div>
<div class="div2"></div>