I'm creating a portfolio website, and I'm trying to keep my scroll-bars hidden so it looks professional. However, none of the solutions I've found online, such as .element::-webkit-scrollbar { width: 0 !important }, seamless="seamless", or any of the overflow: hidden variations (which is unusable anyway due to the fact that I would like to still be able to scroll), seem to work.
I'm not sure which part of my HTML I should include, so here's all of it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href='css/fonts.css' rel="stylesheet" type="text/css">
<link href='css/font-awesome.min.css' rel="stylesheet" type="text/css">
<link href='css/normalize.css' rel="stylesheet" type="text/css">
<link href='css/style.css' rel="stylesheet" type="text/css">
<link rel="icon" href="img/Logo.ico">
<title>*my name*</title>
</head>
<body>
<nav class="fixed-nav-bar">
<ul id="left-align-menubar">
<li class="nav-button">*my name*</li>
</ul>
<ul id="right-align-menubar">
<li class="nav-button">Math Work</li>
<li class="nav-button">Language Work</li>
<li class="nav-button">Tech Work</li>
<li class="nav-button">Art Pieces</li>
<li class="nav-button">Science Work</li>
<li class="nav-button">Professional Work</li>
</ul>
</nav>
<div class="main-content" id="main">
<div align="center" class="main-title">
<h1>*my name*</h1></div>
<div class="container showcase-div" id="math-showcase">
<img src="img/Math.jpg">
<h2>Mathematics Work <span id="math-showcase-arrow" class="fa fa-angle-double-right fa-lg"></span></h2>
<div class="showcase-dropdown" id="math-dropdown">
<div>
<a href="" class="overlay-show" id="kiteheight">
<p>Kite Height Report</p>
</a>
</div>
<div>
skljhsldkjfh
</div>
<div>
skljhlkjh
</div>
</div>
</div>
<div class="container showcase-div" id="lang-showcase">
<img src="img/Math.jpg">
<h2>Language Work <span id="lang-showcase-arrow" class="fa fa-angle-double-right fa-lg"></span></h2>
<div class="showcase-dropdown" id="lang-dropdown">
<div>
skdjhfs
</div>
<div>
skljhsldkjfh
</div>
<div>
skljhlkjh
</div>
</div>
</div>
<div class="container showcase-div" id="tech-showcase">
<img src="img/Math.jpg">
<h2>Technological Work <span id="tech-showcase-arrow" class="fa fa-angle-double-right fa-lg"></span></h2>
<div class="showcase-dropdown" id="tech-dropdown">
<div>
skdjhfs
</div>
<div>
skljhsldkjfh
</div>
<div>
skljhlkjh
</div>
</div>
</div>
<div class="container showcase-div" id="art-showcase">
<img src="img/Math.jpg">
<h2>Artistic Pieces <span id="art-showcase-arrow" class="fa fa-angle-double-right fa-lg"></span></h2>
<div class="showcase-dropdown" id="art-dropdown">
<div>
skdjhfs
</div>
<div>
skljhsldkjfh
</div>
<div>
skljhlkjh
</div>
</div>
</div>
<div class="container showcase-div" id="sci-showcase">
<img src="img/Math.jpg">
<h2>Science Work <span id="sci-showcase-arrow" class="fa fa-angle-double-right fa-lg"></span></h2>
<div class="showcase-dropdown" id="sci-dropdown">
<div>
skdjhfs
</div>
<div>
skljhsldkjfh
</div>
<div>
skljhlkjh
</div>
</div>
</div>
<div class="container showcase-div" id="pro-showcase">
<img src="img/Math.jpg">
<h2>Professional Work <span id="pro-showcase-arrow" class="fa fa-angle-double-right fa-lg"></span></h2>
<div class="showcase-dropdown" id="pro-dropdown">
<div>
skdjhfs
</div>
<div>
skljhsldkjfh
</div>
<div>
skljhlkjh
</div>
</div>
</div>
</div>
<div class="overlay">
<span class="fa fa-close fa-2x" id="overlay-close"></span></a>
</div>
<footer>
© *my name*. All rights reserved. This website was built from the ground up by *my name* to showcase his portfolio. The website itself is part of the portfolio.
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/script.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
Here's the CSS I use, including the solutions that have currently been suggested to me:
/*********************************
TEXT STYLING
*********************************/
* {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1 {
margin: 0;
padding: 2%;
}
.main-title {
font-size: 2em;
font-family: 'voltaire';
margin-top: 50px;
}
a, a:before, a:after {
text-decoration: none;
color: black;
}
h2 {
text-align: center;
}
/*********************************
NAV BAR STYLING
*********************************/
.nav-button:hover {
background-color: rgb(217, 217, 217);
height: 50px;
margin-top: 0;
}
.nav-button {
list-style: none;
display: inline-block;
}
.nav-button-link {
display: inline-block;
padding: 15px;
height: 20px;
}
#right-align-menubar {
top: 0;
right: 0;
display: inline-block;
position: absolute;
margin: 0;
vertical-align: middle;
}
#left-align-menubar {
top: 0;
left: 0;
display: inline-block;
position: absolute;
margin: 0;
vertical-align: middle;
padding-left: 0px;
}
.fixed-nav-bar {
font-weight: 500;
font-size: 1em;
position: fixed;
top: 0;
width: 100%;
height: 50px;
background-color: white;
z-index: 100;
}
/*********************************
BODY STYLING
*********************************/
body {
margin: 0;
font-family: 'nerislight';
background-color: white;
color: black;
}
footer {
background-color: black;
color: white;
padding: 10px;
}
/*********************************
SHOWCASE AND OVERLAY STYLING
*********************************/
.showcase-div img {
width: 100%;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.showcase-div {
position: relative;
}
.showcase-dropdown {
background-color: black;
display: none;
}
.showcase-dropdown div {
display: inline-block;
width: 33%;
margin: 0;
text-align: center;
}
.overlay-show p {
font-size: 1.25em;
color: white;
padding: 10px 0;
margin: 0;
}
#overlay-close {
position: fixed;
top: 10px;
right: 10px;
color: black;
z-index: 200;
}
.overlay {
display: none;
background-color: rgba(255, 255, 255, 0.9);
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
overflow-y: scroll;
width: 100%;
padding: 0;
}
.document-embed {
height: 100%;
width: 100%;
}
.document p {
color: black;
margin: 0;
padding: 10px;
}
/*********************************
MISCELLANEOUS STYLING
*********************************/
body {
overflow: hidden;
}
/*********************************
ANIMATIONS
*********************************/
#-webkit-keyframes rotate {
from {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
to {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#-webkit-keyframes rotateBack {
from {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
to {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(90deg);
}
}
#keyframes rotateBack {
from {
transform: rotate(90deg);
}
to {
transform: rotate(0deg);
}
}
Here's my JavaScript with the part that gets broken due to overflow: hidden:
$('#main').animate({
scrollTop: target.offset().top - 50
}, 1000);
Normally, that has html, body rather than #main, but this was suggested to me and I would like to know why that does not work and what my error is.
It's also probably worth mentioning that this website is not even close to done and any suggestions you may have about improving code are welcome. Also, I do know that there are many other questions almost exactly like this one all over everywhere, but as I said, none of the answered my question. Thank you in advance!
Have you tried adding overflow:hidden to the body attribute in css? That's generally where I fail.
If the question is to hide the scrollbar and still be able to scroll content. Then i think it may not be possible in a straight forward manner because that is browser implementation for content.
You could however use overflow:hidden on body and use any of the custom jQuery scrollbar plugins on a div just inside body.
Jquery scrollable is a good starting point: https://gromo.github.io/jquery.scrollbar/demo/basic.html
Related
I'm new to HTML and CSS and I'm trying to design a website from some source code that I found.
When I open the page on the web, It shows as follows:
When I open this page of a mobile device it appears as follows:
When on a mobile device, the section of Download the app overlaps the phone image that I added.
How can I make sure that the whole blue section will be below the image?
The parts of the .css that I found relevant are:
.home-image-right {
display: block;
position: absolute;
right: 0;
top: 55%;
-webkit-transform: translateY(-68%);
-ms-transform: translateY(-68%);
transform: translateY(-68%);
padding-top: 21rem;
z-index: 500;
width: 50%;
text-align: right;
}
.home-image-right img {
vertical-align: bottom;
width: 75%;
}
#download {
background: #2c80c4;
color: #ffffff;
padding-top: 12rem;
padding-bottom: 12rem;
text-align: center;
}
#download h1 {
color: #ffffff;
}
#download h1::before {
background-color: #ffffff;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
#download .lead {
color: #ffffff;
margin-top: 4.8rem;
}
#download .row {
max-width: 800px;
}
#download .download-badges {
list-style: none;
margin: 0;
text-align: center;
}
#download .download-badges li {
display: inline-block;
margin: 0 7.5px;
padding-left: 0;
}
#download .download-badges li a {
display: block;
width: 230px;
height: 71px;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 230px 71px;
}
<div class="overlay"></div>
<div class="home-content">
<div class="row contents">
<div class="home-content-left">
<img src="images/logo.png" srcset="images/logo.png 1x" data-aos="fade-up">
<h1 data-aos="fade-up">
....
</h1>
<div class="buttons" data-aos="fade-up">
<a href="#download" class="smoothscroll button stroke">
<span class="icon-circle-down" aria-hidden="true"></span> Download App
</a>
</div>
</div>
<div class="home-image-right">
<img src="images/screen.png" srcset="images/screen.png 1x" data-aos="fade-up">
</div>
</div>
</div>
<!-- end home-content -->
<div class="home-scrolldown">
<a href="#about" class="scroll-icon smoothscroll">
<span>Scroll Down</span>
<i class="icon-arrow-right" aria-hidden="true"></i>
</a>
</div>
</section>
<!-- end home -->
<!-- download
================================================== -->
<section id="download">
<div class="row">
<div class="col-full">
<h1 class="intro-header" data-aos="fade-up">Download Our App Today!</h1>
<ul class="download-badges">
<li>Play Store</li>
</ul>
</div>
</div>
</section>
<!-- end download -->
Thank you
you may style your website with two specific css coding one is for desktop view and other one is for mobile view you want to use this media tag and write your css for mobile view into this
you may change the max-with value since 1px
it make if your device width is smaller than 600px it change the background-color to light blue
#media only screen and(max-width: 600px){
body{
background-color:light blue;
}
}
https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Hmm that´s hard to say, without knowing where the image is. But i think this is your problem:
.home-image-right {
display: block;
position: absolute;
right: 0;
top: 55%;
-webkit-transform: translateY(-68%);
-ms-transform: translateY(-68%);
transform: translateY(-68%);
padding-top: 21rem;
z-index: 500;
width: 50%;
text-align: right;
}
position: absolute.
When assigning a position, you take out this section from the flow.
Take a look here: https://www.w3schools.com/css/css_positioning.asp
I've created a left navigation bar using buttons. I'm trying to reduce the hyperlink area to just the background image. Also, another issue I'm having is the elements overlaying the background image are taking precedence over the hyperlink, so the button is not actually clickable. Page for reference
http://www.auburn.edu/administration/facilities/home-page/index.html
Hyperlink area
Here's the background image area
.img-responsive {
display: block;
padding: 0;
margin: 0;
}
.background:hover .head {
color: #d76e08;
}
.overlay {
position: absolute;
z-index: 1;
top: 0;
left: 0;
color: white;
}
.icon {
padding-top: 15px;
padding-left: 40px;
}
.head {
margin-top: -75px;
padding-left: 120px;
}
.content {
margin-top: -5px;
padding-left: 120px;
padding-right: 35px;
}
<div class="row">
<div class="col-sm-12">
<div class="background">
<a href="../Collin/misc/issues/index.html">
<img alt="background" class="img-responsive" src="buttons/images/button.png" />
</a>
<div class="overlay">
<div class="icon">
<img alt="test" class="img-responsive" src="buttons/images/info-icon.png" />
</div>
<p class="head">Ask Facilities</p>
<p class="content">Here will be text about the button. .</p>
</div>
</div>
</div>
</div>
I'm trying to reduce the hyperlink area to just the background image.
Your markup is incredibly complex for what you are displaying.
You could have something like:
<ul>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
<li>
<a>
<h2></h2>
<p></p>
</a>
</li>
</ul>
and add the image and the gradient using CSS.
I would use a single link tag for your button and leverage CSS gradients for the background:
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.button {
background-image: linear-gradient(to bottom, #3D85C6, #07355F 50%, #07355F);
background-size: 100% 200%;
border-radius: 4px;
color: #fff;
display: block;
padding: 10px;
text-decoration: none;
transition: all 150ms ease-in-out;
}
.button:hover,
.button:focus,
.button:active {
background-position: 0 50%;
}
.button-icon {
float: left;
margin-right: 15px;
}
.button-content {
overflow: hidden;
}
.button-title {
font-size: 18px;
font-weight: bold;
}
.button-description {
font-size: 16px;
}
<a class="button" href="../Collin/misc/issues/index.html">
<div class="button-icon">
<img src="http://satyr.io/72/white?brand=github" alt=""/>
</div>
<div class="button-content">
<p class="button-title">Ask Facilities</p>
<p class="button-description">Here will be text about the button…</p>
</div>
</a>
Also here http://jsbin.com/rikisemawe/edit?html,css,output
The elements in OP were stacked in the markup, there were no nested components of the button. That would explain the unusual position coords and large padding.
Instead of <img>, background-image is used. Changed some of the tags to a real <button>, <h4> instead of <p>, etc.
SNIPPET
.button {
position: relative;
min-width: 350px;
max-width: 100%;
min-height: 95px;
height: auto;
padding: 5px 10px;
border: 0 none transparent;
border-radius: 6px;
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/button.png)no-repeat;
background-size: cover;
}
.background:hover .head {
color: #d76e08;
}
.text {
padding: 0 5px;
position: absolute;
left: 85px;
top: 5px;
text-align: left;
color: #def;
text-decoration: none;
}
.button:hover,
.text:hover {
text-decoration: none;
color: #def;
}
.button:hover .head {
color: gold;
}
.icon {
width: 75px;
height: 75px;
position: absolute;
top: calc(50% - 37.5px);
background: url(http://www.auburn.edu/administration/facilities/home-page/buttons/images/service-icon.png)no-repeat;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-sm-12">
<button class="button">
<div class="icon"></div>
<a class='text'>
<h4 class="head">Ask Facilities</h4>
<p class="content">Here will be text about the button.</p>
</a>
</button>
</div>
</div>
I would like to center the text on my homepage vertical in the middel of the page. Right now i tried to do this with a percentage, but this isn't the right way because when i open the webpage on my phone or an ipad the text doesn't center. Does anyone know how i can center it the right way?
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html, body{
width: 100%;
margin: 0;
padding: 0;
height:100%;
}
/* wrapper */
#wrapper {
min-height: 100%;
position: relative;
}
/* menu */
#header {
height: 80px;
width: 100%;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover{
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
padding-bottom:80px;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
margin-top: 15%;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
display offers you 2 options : the table layout or the flex model ( both will push footer down if content grows)
test snippets in full page mode and resize window
1) display:table/table-row/table-cell (should include IE8 and older browsers CSS 2.1)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper {
display: table;
position: relative;
}
/* menu */
#header {
height: 80px;
display: table-row;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
vertical-align: middle;
display: table-cell;
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
width: 100%;
height: 80px;
display: table-row;
text-align: center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
2) the flex model (latest browsers)
#charset "UTF-8";
/* CSS Document */
body {
background: white;
}
html,
body,
#wrapper {
width: 100%;
margin: 0;
padding: 0;
height: 100%;
}
/* wrapper */
#wrapper, #content {
display: flex;/* triiger flex model prefixed might be needed for not so old browsers */
flex-direction:column /* here we need to stack elements */
}
/* menu */
#header {
height: 80px;
background: #000000;
}
li {
display: block;
float: left;
margin-left: 10px;
margin-top: 20px;
margin-right: 10px;
}
a {
position: reletive;
text-decoration: none;
color: #ffffff;
font-size: 24px;
font-family: 'Open Sans Condensed';
}
li:hover {
border-bottom: 1px solid white;
padding-bottom: 0px;
}
.home {
margin-left: 30px;
}
.contact {
float: right;
margin-right: 30px;
}
/*content*/
#content {
flex:1;/* take as much space avalaible */
justify-content:center;/* because it is display:flex too, you can horizontally center its contents */
align-items:center;/* because it is display:flex too, you can vertically center its contents */
}
/* homepage */
.anouk {
font-family: 'Oswald';
color: #000000;
font-size: 80px;
text-align: center;
}
/* footer */
#footer {
background: #000000;
height: 80px;
text-align:center;
}
.icoontjes {
margin-top: 15px;
margin-left: 10px;
margin-right: 10px;
height: 50px;
}
.icoontjes:hover {
opacity: 0.8;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Anouk</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Oswald|Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="menu">
<!--Home-->
<li class="home">
<a href="index.html">
Home
</a>
</li>
<!--Over Mij-->
<li class="over">
<a href="over.html">
Over Mij
</a>
</li>
<!--Portfolio-->
<li class="portfolio">
<a href="portfolio.html">
Portfolio
</a>
</li>
<!--Contact-->
<li class="contact">
<a href="contact.html">
Contact
</a>
</li>
</div>
</div>
<div id="content">
<p class="anouk">
Anouk Den Haag
</p>
</div>
<div id="footer">
<a href="mailto:#">
<img class="icoontjes" src="icoontjes/email.png" alt="email">
</a>
<a href="#" target="_blank">
<img class="#" src="icoontjes/facebook.png" alt="facebook">
</a>
<a href="#" target="_blank">
<img class="icoontjes" src="icoontjes/instagram.png" alt="instagram">
</a>
</div>
</div>
</body>
</html>
add overflow:auto to #content and it will show a scrollbar if needed , so footer is not pushed down.
Try adding this CSS to the text you want centered:
.your_centered_element {
position: absolute;
top:50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
This will keep the element centered.
Read about the transform: translateX(-50%) translateY(-50%); in the MDN docs
Hope this helps!
One solution here is to use viewport-width and viewport-height units:
.anouk {
position: absolute;
top: 0;
left: 0;
width: 100vw;
line-height: 100vh;
margin: 0;
padding: 0;
text-align: center;
}
for centering the text you have to use **margin auto**
css file--
* {
border: 1px dashed black;
}
div >p {
height: 50px;
width: 100px;
border: 2px solid black;
border-radius: 5px;
background-color: #FFD700;
margin: auto;
}
html code
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet3.css"/>
<title>Result</title>
</head>
<body>
<div><p >
Anouk Den Haag
</p></div>
</body>
</html>
SEE THE SNAPSHOT
I constructed a 1-10-1-column header construction in Bootstrap. Now I want to center this ! in the 10-column. But as you can see by the dotted lines in the middle of the page ! is not centered in the exact middle. Why not? And how can I get it there?
And the height of the header depends on the font-size of the text in it. How can I set the height of the header manually by a command?
HTML:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div id="body-wrapper">
<div class="menu">
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-fluid">
<div class="header">
<div class="row">
<div class="col-md-1 text-center">
<div class="icon-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
<div class="col-md-1 text-center">
</div>
</ul>
</div>
</div>
</div>
<div class="jumbo"></div>
<div class="footer">
<div class="container">
<p>© Lorem ipsum.</p>
</div>
</div>
</div>
</body>
</html>
CSS:
html {}
body{
left: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
body:after {
content: "";
position: absolute;
z-index: -1;
top: 0px;
bottom: 0px;
left: 50%;
border-left: 1px dotted #333333;
}
.menu {
left: -185px;
height: 200%;
position: fixed;
width: 185px;
}
.menu ul {
border-top: 1px solid rgb(51,51,51);
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid rgb(51,51,51);
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: rgb(51,51,51);
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.header {
}
.header i {
font-size: 30px;
margin-top: 15px;
}
.header a{
color: rgb(250,250,250);
font-size: 40px;
text-align: center;
}
.header .col-md-10 {
background-color: rgb(51,51,51);
width: 85%;
margin-left:auto;
margin-right:auto;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 1000px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Raleway', sans-serif;
text-transform: normal;
font-size: 11px;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
JS:
$(document).ready(function() {
$(".icon-menu").click(function() {
$(".menu").animate({
left: "0px"
}, 600);
$(".icon-menu").toggle(1600);
$("body").animate({
left: "185px"
}, 600);
});
});
$(document).ready(function() {
$('.icon-close').click(function() {
$('.menu').animate({
left: "-185px"
}, 600);
$(".icon-menu").toggle(600);
$('body').animate({
left: "0px"
}, 600);
});
});
Codepen
Try this:
<div class="row col-md-12">
...
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
...
</div>
If you want change height of header try to set height for div, for example:
<div class="col-md-10 text-center" style="height:100px;">
<li><a>!</a></li>
</div>
Of course for good style, create a specific style at css with value of height and add to class of your div.
But as you can see by the dotted lines in the middle of the page ! is not centered in the exact middle. Why not? And how can I get it there?
It is invalid to have a list tag <li> in the middle of nowhere. Try using a <span> instead (or leave it out alltogether) and your ! will be centered.
<div class="col-md-10 text-center">
<a>!</a>
</div>
How can I set the height of the header manually by a command?
You can assign the height property. I also set a background-color, so you can see that the header actually grows.
.header {
height: 200px;
background-color: blue;
}
actuallay ! is already coming in center your dotted line giving on body after is not align center you need to use translated instead of left. for header to giving height you need to give header in navbar div that is bootstrap class.
here is demo...
$(document).ready(function() {
$(".icon-menu").click(function() {
$(".menu").animate({
left: "0px"
}, 600);
$(".icon-menu").toggle(1600);
$("body").animate({
left: "185px"
}, 600);
});
});
$(document).ready(function() {
$('.icon-close').click(function() {
$('.menu').animate({
left: "-185px"
}, 600);
$(".icon-menu").toggle(600);
$('body').animate({
left: "0px"
}, 600);
});
});
html {}
body{
left: 0;
margin: 0;
overflow-x: hidden;
overflow-y: auto;
position: relative;
}
body:after {
border-left: 1px dotted #333333;
bottom: 0;
content: "";
display: block;
left: 0;
margin: 0 auto 0 50%;
position: absolute;
right: 0;
text-align: center;
top: 0;
z-index: -1;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.menu {
left: -185px;
height: 200%;
position: fixed;
width: 185px;
}
.menu ul {
border-top: 1px solid rgb(51,51,51);
list-style: none;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid rgb(51,51,51);
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
}
.menu a {
color: rgb(51,51,51);
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
}
.icon-close {
cursor: pointer;
padding-left: 10px;
padding-top: 10px;
}
.header {
}
.header i {
font-size: 30px;
margin-top: 15px;
}
.header a{
color: rgb(250,250,250);
font-size: 40px;
text-align: center;
}
.header .col-md-10 {
background-color: rgb(51,51,51);
width: 85%;
margin-left:auto;
margin-right:auto;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}
.footer {
background-color: rgb(51,51,51);
color: rgb(51,51,51);
padding: 30px 0;
margin-top: 1000px;
}
.footer p {
color: rgb(250,250,250);
font-family: 'Raleway', sans-serif;
text-transform: normal;
font-size: 11px;
}
#media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}
.supporting .col {
width: 100%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="/static/main.css" >
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/static/app.js"></script>
</head>
<body>
<div id="body-wrapper">
<div class="navbar">
<div class="menu">
<div class="icon-close">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/close.png">
</div>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-fluid">
<div class="header ">
<div class="row">
<div class="col-md-1 text-center">
<div class="icon-menu">
<i class="fa fa-bars"></i>
</div>
</div>
<div class="col-md-10 text-center">
<li><a>!</a></li>
</div>
<div class="col-md-1 text-center">
</div>
</ul>
</div>
</div>
</div></div>
<div class="jumbo"></div>
<div class="footer">
<div class="container">
<p>© Lorem ipsum.</p>
</div>
</div>
</div>
</body>
</html>
I'm trying to show a description when hovering over an image. I've already done it in a less than desirable way, using image sprites and hovers here: I want it to look exactly like how I have it, but using real text instead of an image.
I've tried a few different things but I can't seem to figure out how to do it. I'm trying to do it using HTML and CSS only, but I'm not sure if that's possible.
Feel free to poke around in my code, I'll paste what I think is relavent here.
HTML
div#projectlist {
width: 770px;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 40px;
}
div#buzzbutton {
display: block;
float: left;
margin: 2px;
background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
width: 150px;
height: 150px;
}
div#buzzbutton:hover {
background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
width: 150px;
height: 150px;
background-position: 0 -150px;
}
div#slinksterbutton {
display: block;
float: left;
background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
width: 150px;
height: 150px;
margin: 2px;
}
div#slinksterbutton:hover {
background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
width: 150px;
height: 150px;
background-position: 0 -150px;
}
<div id="projectlist">
<div id="buzzbutton">
<img src="content/assets/thumbnails/transparent_150x150.png" alt="" />
</div>
<div id="slinksterbutton">
<img src="content/assets/thumbnails/transparent_150x150.png" alt="" />
</div>
</div>
It's simple. Wrap the image and the "appear on hover" description in a div with the same dimensions of the image. Then, with some CSS, order the description to appear while hovering that div.
/* quick reset */
* {
margin: 0;
padding: 0;
border: 0;
}
/* relevant styles */
.img__wrap {
position: relative;
height: 200px;
width: 257px;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(29, 106, 154, 0.72);
color: #fff;
visibility: hidden;
opacity: 0;
/* transition effect. not necessary */
transition: opacity .2s, visibility .2s;
}
.img__wrap:hover .img__description {
visibility: visible;
opacity: 1;
}
<div class="img__wrap">
<img class="img__img" src="http://placehold.it/257x200.jpg" />
<p class="img__description">This image looks super neat.</p>
</div>
A nice fiddle: https://jsfiddle.net/govdqd8y/
EDIT:
There's another option if you don't want to explicitly set the height of the <img> on the wrapping <div>, and that is simply setting the <div>'s display to inline-block. (Keep in mind, though, that it won't look good if the image fails to load.)
If you choose this option, you'll notice that there'll be a slight spacing between the <img> and the bottom of the wrapping <div>. That's because of the <img>'s default vertical-align value of baseline. If you set it to bottom it will disappear.
Here's a fiddle using this option: https://jsfiddle.net/joplomacedo/5cL31o0g/
In your HTML, try and put the text that you want to come up in the title part of the code:
<a href="buzz.html" title="buzz hover text">
You can also do the same for the alt text of your image.
You can also use the title attribute in your image tag
<img src="content/assets/thumbnails/transparent_150x150.png" alt="" title="hover text" />
This is what I use to make the text appear on hover:
* {
box-sizing: border-box
}
div {
position: relative;
top: 0px;
left: 0px;
width: 400px;
height: 400px;
border-radius: 50%;
overflow: hidden;
text-align: center
}
img {
width: 400px;
height: 400px;
position: absolute;
border-radius: 50%
}
img:hover {
opacity: 0;
transition:opacity 2s;
}
heading {
line-height: 40px;
font-weight: bold;
font-family: "Trebuchet MS";
text-align: center;
position: absolute;
display: block
}
div p {
z-index: -1;
width: 420px;
line-height: 20px;
display: inline-block;
padding: 200px 0px;
vertical-align: middle;
font-family: "Trebuchet MS";
height: 450px
}
<div>
<img src="https://68.media.tumblr.com/20b34e8d12d4230f9b362d7feb148c57/tumblr_oiwytz4dh41tf8vylo1_1280.png">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing <br>elit. Reiciendis temporibus iure dolores aspernatur excepturi <br> corporis nihil in suscipit, repudiandae. Totam.
</p>
</div>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="container">
<img src="http://lorempixel.com/500/500/" alt="Avatar" class="image">
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
</body>
</html>
Reference Link W3schools with multiple styles
HTML
<img id="close" className="fa fa-close" src="" alt="" title="Close Me" />
CSS
#close[title]:hover:after {
color: red;
content: attr(title);
position: absolute;
left: 50px;
}
I saw a lot of people use an image tag. I prefer to use a background image because I can manipulate it. For example, I can:
Add smoother transitions
save time not having to crop images by using the "background-size: cover;" property.
The HTML/CSS:
.overlay-box {
background-color: #f5f5f5;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
}
.overlay-box:hover .desc,
.overlay-box:focus .desc {
opacity: 1;
}
/* opacity 0.01 for accessibility */
/* adjust the styles like height,padding to match your design*/
.overlay-box .desc {
opacity: 0.01;
min-height: 355px;
font-size: 1rem;
height: 100%;
padding: 30px 25px 20px;
transition: all 0.3s ease;
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
<div class="overlay-box" style="background-image: url('https://via.placeholder.com/768x768');">
<div class="desc">
<p>Place your text here</p>
<ul>
<li>lorem ipsum dolor</li>
<li>lorem lipsum</li>
<li>lorem</li>
</ul>
</div>
</div>
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nelsonleite/pen/RaGwba?depth=everything&order=popularity&page=4&q=product&show_forks=false" />
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<style class="cp-pen-styles">.product-description {
transform: translate3d(0, 0, 0);
transform-style: preserve-3d;
perspective: 1000;
backface-visibility: hidden;
}
body {
color: #212121;
}
.container {
padding-top: 25px;
padding-bottom: 25px;
}
img {
max-width: 100%;
}
hr {
border-color: #e5e5e5;
margin: 15px 0;
}
.secondary-text {
color: #b6b6b6;
}
.list-inline {
margin: 0;
}
.list-inline li {
padding: 0;
}
.card-wrapper {
position: relative;
width: 100%;
height: 390px;
border: 1px solid #e5e5e5;
border-bottom-width: 2px;
overflow: hidden;
margin-bottom: 30px;
}
.card-wrapper:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card-wrapper:hover:after {
opacity: 1;
}
.card-wrapper:hover .image-holder:before {
opacity: .75;
}
.card-wrapper:hover .image-holder:after {
opacity: 1;
transform: translate(-50%, -50%);
}
.card-wrapper:hover .image-holder--original {
transform: translateY(-15px);
}
.card-wrapper:hover .product-description {
height: 205px;
}
#media (min-width: 768px) {
.card-wrapper:hover .product-description {
height: 185px;
}
}
.image-holder {
display: block;
position: relative;
width: 100%;
height: 310px;
background-color: #ffffff;
z-index: 1;
}
#media (min-width: 768px) {
.image-holder {
height: 325px;
}
}
.image-holder:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #4CAF50;
opacity: 0;
z-index: 5;
transition: opacity 0.6s;
}
.image-holder:after {
content: '+';
font-family: 'Raleway', sans-serif;
font-size: 70px;
color: #4CAF50;
text-align: center;
position: absolute;
top: 92.5px;
left: 50%;
width: 75px;
height: 75px;
line-height: 75px;
background-color: #ffffff;
opacity: 0;
border-radius: 50%;
z-index: 10;
transform: translate(-50%, 100%);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
transition: all 0.4s ease-out;
}
#media (min-width: 768px) {
.image-holder:after {
top: 107.5px;
}
}
.image-holder .image-holder__link {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 15;
}
.image-holder .image-holder--original {
transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.image-liquid {
width: 100%;
height: 325px;
background-size: cover;
background-position: center center;
}
.product-description {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 80px;
padding: 10px 15px;
overflow: hidden;
background-color: #fafafa;
border-top: 1px solid #e5e5e5;
transition: height 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 2;
}
#media (min-width: 768px) {
.product-description {
height: 65px;
}
}
.product-description p {
margin: 0 0 5px;
}
.product-description .product-description__title {
font-family: 'Raleway', sans-serif;
position: relative;
white-space: nowrap;
overflow: hidden;
margin: 0;
font-size: 18px;
line-height: 1.25;
}
.product-description .product-description__title:after {
content: '';
width: 60px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background: linear-gradient(to right, rgba(255, 255, 255, 0), #fafafa);
}
.product-description .product-description__title a {
text-decoration: none;
color: inherit;
}
.product-description .product-description__category {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.product-description .product-description__price {
color: #4CAF50;
text-align: left;
font-weight: bold;
letter-spacing: 0.06em;
}
#media (min-width: 768px) {
.product-description .product-description__price {
text-align: right;
}
}
.product-description .sizes-wrapper {
margin-bottom: 15px;
}
.product-description .color-list {
font-size: 0;
}
.product-description .color-list__item {
width: 25px;
height: 10px;
position: relative;
z-index: 1;
transition: all .2s;
}
.product-description .color-list__item:hover {
width: 40px;
}
.product-description .color-list__item--red {
background-color: #F44336;
}
.product-description .color-list__item--blue {
background-color: #448AFF;
}
.product-description .color-list__item--green {
background-color: #CDDC39;
}
.product-description .color-list__item--orange {
background-color: #FF9800;
}
.product-description .color-list__item--purple {
background-color: #673AB7;
}
</style></head><body>
<!--
Inspired in this dribbble
https://dribbble.com/shots/986548-Product-Catalog
-->
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<article class="card-wrapper">
<div class="image-holder">
<div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/24/Blue_Tshirt.jpg')">
</div>
</div>
<div class="product-description">
<!-- title -->
<h1 class="product-description__title">
<a href="#">
Adidas Originals
</a>
</h1>
<!-- category and price -->
<div class="row">
<div class="col-xs-12 col-sm-8 product-description__category secondary-text">
Men's running shirt
</div>
<div class="col-xs-12 col-sm-4 product-description__price">
€ 499
</div>
</div>
<!-- divider -->
<hr />
<!-- sizes -->
<div class="sizes-wrapper">
<b>Sizes</b>
<br />
<span class="secondary-text text-uppercase">
<ul class="list-inline">
<li>xs,</li>
<li>s,</li>
<li>sm,</li>
<li>m,</li>
<li>l,</li>
<li>xl,</li>
<li>xxl</li>
</ul>
</span>
</div>
<!-- colors -->
<div class="color-wrapper">
<b>Colors</b>
<br />
<ul class="list-inline color-list">
<li class="color-list__item color-list__item--red"></li>
<li class="color-list__item color-list__item--blue"></li>
<li class="color-list__item color-list__item--green"></li>
<li class="color-list__item color-list__item--orange"></li>
<li class="color-list__item color-list__item--purple"></li>
</ul>
</div>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<article class="card-wrapper">
<div class="image-holder">
<div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/75/Jeans_BW_2_(3213391837).jpg/543px-Jeans_BW_2_(3213391837).jpg')">
</div>
</div>
<div class="product-description">
<!-- title -->
<h1 class="product-description__title">
<a href="#">
Adidas Originals
</a>
</h1>
<!-- category and price -->
<div class="row">
<div class="col-sm-8 product-description__category secondary-text">
Men's running shirt
</div>
<div class="col-sm-4 product-description__price text-right">
€ 499
</div>
</div>
<!-- divider -->
<hr />
<!-- sizes -->
<div class="sizes-wrapper">
<b>Sizes</b>
<br />
<span class="secondary-text text-uppercase">
<ul class="list-inline">
<li>xs,</li>
<li>s,</li>
<li>sm,</li>
<li>m,</li>
<li>l,</li>
<li>xl,</li>
<li>xxl</li>
</ul>
</span>
</div>
<!-- colors -->
<div class="color-wrapper">
<b>Colors</b>
<br />
<ul class="list-inline color-list">
<li class="color-list__item color-list__item--red"></li>
<li class="color-list__item color-list__item--blue"></li>
<li class="color-list__item color-list__item--green"></li>
<li class="color-list__item color-list__item--orange"></li>
<li class="color-list__item color-list__item--purple"></li>
</ul>
</div>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<article class="card-wrapper">
<div class="image-holder">
<div class="image-liquid image-holder--original" style="background-image: url('https://upload.wikimedia.org/wikipedia/commons/b/b8/Columbia_Sportswear_Jacket.jpg')">
</div>
</div>
<div class="product-description">
<!-- title -->
<h1 class="product-description__title">
<a href="#">
Adidas Originals
</a>
</h1>
<!-- category and price -->
<div class="row">
<div class="col-sm-8 product-description__category secondary-text">
Men's running shirt
</div>
<div class="col-sm-4 product-description__price text-right">
€ 499
</div>
</div>
<!-- divider -->
<hr />
<!-- sizes -->
<div class="sizes-wrapper">
<b>Sizes</b>
<br />
<span class="secondary-text text-uppercase">
<ul class="list-inline">
<li>xs,</li>
<li>s,</li>
<li>sm,</li>
<li>m,</li>
<li>l,</li>
<li>xl,</li>
<li>xxl</li>
</ul>
</span>
</div>
<!-- colors -->
<div class="color-wrapper">
<b>Colors</b>
<br />
<ul class="list-inline color-list">
<li class="color-list__item color-list__item--red"></li>
<li class="color-list__item color-list__item--blue"></li>
<li class="color-list__item color-list__item--green"></li>
<li class="color-list__item color-list__item--orange"></li>
<li class="color-list__item color-list__item--purple"></li>
</ul>
</div>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<article class="card-wrapper">
<div class="image-holder">
<div class="image-liquid image-holder--original" style="background-image: url('http://www.publicdomainpictures.net/pictures/20000/nahled/red-shoes-isolated.jpg')">
</div>
</div>
<div class="product-description">
<!-- title -->
<h1 class="product-description__title">
<a href="#">
Adidas Originals
</a>
</h1>
<!-- category and price -->
<div class="row">
<div class="col-sm-8 product-description__category secondary-text">
Men's running shirt
</div>
<div class="col-sm-4 product-description__price text-right">
€ 499
</div>
</div>
<!-- divider -->
<hr />
<!-- sizes -->
<div class="sizes-wrapper">
<b>Sizes</b>
<br />
<span class="secondary-text text-uppercase">
<ul class="list-inline">
<li>xs,</li>
<li>s,</li>
<li>sm,</li>
<li>m,</li>
<li>l,</li>
<li>xl,</li>
<li>xxl</li>
</ul>
</span>
</div>
<!-- colors -->
<div class="color-wrapper">
<b>Colors</b>
<br />
<ul class="list-inline color-list">
<li class="color-list__item color-list__item--red"></li>
<li class="color-list__item color-list__item--blue"></li>
<li class="color-list__item color-list__item--green"></li>
<li class="color-list__item color-list__item--orange"></li>
<li class="color-list__item color-list__item--purple"></li>
</ul>
</div>
</div>
</article>
</div>
</div>
</div>
</body></html>
The sample is made
<html>
<head>
<style>
.hide {
display: none;
}
.myDIV:hover + .hide {
display: block;
color: red;
}
</style>
</head>
<body>
<h2>Display an Element on Hover</h2>
<div class="myDIV">Hover over me.</div>
<div class="hide">I am shown when someone hovers over the div above.</div>
</body>
</html>
For accessibility reasons, you should use the correct semantic tags. Use a figure as a container and include the text to the image as figcaption.
Apply position: absolute to the container and then position: absolute to the figcaption.
Simply hide the figcaption with display: block and make it visible again by using :hover on the wrapping figure element.
figure {
position: relative;
}
figcaption {
position: absolute;
inset: 2px;
display: none;
}
figure:hover figcaption {
display: flex;
}
/* for visualization only */
figure {
display: inline-block;
}
figcaption {
padding: 1em;
justify-content: center;
align-items: center;
background-color: rgba(255, 255, 255, 0.7);
}
img {
border: 2px dashed red;
}
<figure>
<img src="https://via.placeholder.com/200.jpg" alt="placeholder image used for demonstration">
<figcaption>placeholder image used for demonstration</figcaption>
</figure>