I'm trying to obtain the same result that is located here where the user can mouse over the layer icon in the upper right-hand corner and a div expands/transitions with information.
I created two divs, one for the icon and one for the information but I'm not sure how to create the mouseover effect.
Here is my JSFiddle if anyone is interested in helping me out. Thanks! https://jsfiddle.net/prime90/vwqs38gL/20/
HTML
<div class=icon>
<img src="https://s3.amazonaws.com/iconbros/icons/icon_pngs/000/000/360/original/layers.png?1510933843" alt="Trulli" class=img>
</div>
<div class="card-body">
<b>Railroad Layers</b>
<div class='train-layer-options'>
<div class="layer-line tracks"></div>
<span class="layer-text">Tracks<br></span>
<div class="layer-fill one-mile"></div>
<span class="layer-text">Sound Buffer (1 mile)<br></span>
<div class="layer-fill half-mile"></div>
<span class="layer-text">Sound Buffer (1/2 mile)<br></span>
<div class="layer-fill onehun-yrds"></div>
<span class="layer-text">Sound Buffer (100 yards)<br></span>
</div>
CSS
.icon{
height: 48px;
width: 48px;
}
.img{
width:48px;
height:48px;
}
.card {
background: black !important;
box-shadow: 5px 10px 18px #888888;
}
.card-body {
background:#f5f5f5;
font-size: 14px;
}
You can move .card-body inside .icon and have
.icon:hover .card-body {
opacity: 1;
}
Example: https://jsfiddle.net/7vdq89g0/
To cover the image up, use positive: relative for the container and position: absolute; top: 0; left: 0 for the box that shows up. Example: https://jsfiddle.net/7vdq89g0/1/
To make hovering not effective to the right of the image (because the box that shows up makes the "hover" event fire up when user hovers on that box that is wider), just make it visibility: hidden and to visible when hover: https://jsfiddle.net/7vdq89g0/2/
.icon {
height: 48px;
width: 48px;
position: relative;
}
.img {
width: 48px;
height: 48px;
}
.card {
background: black !important;
box-shadow: 5px 10px 18px #888888;
}
.card-body {
background: #f5f5f5;
font-size: 14px;
opacity: 0;
transition: opacity 0.3s;
width: 200px;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
/* display: none */
}
.card-header {
text-align: center;
}
.icon:hover .card-body {
opacity: 1;
visibility: visible;
/* display: block; */
}
.layer-text {
display: block;
text-indent: 40px;
}
.btn {
color: #f5f5f5 !important;
}
.layer-fill {
float: left;
width: 25px;
height: 15px;
margin: 5px;
border: 1px solid rgba(0, 0, 0, .2);
position: absolute;
}
.one-mile {
background: #76d7c4;
opacity: .5;
}
.half-mile {
background: #f7dc6f;
opacity: .5;
}
.onehun-yrds {
background: #ec7063;
opacity: .5;
}
/* line icons for legend */
.layer-line {
border: 0;
width: 25px;
height: 1px;
cursor: pointer;
margin-top: 11px;
margin-left: 5px;
display: inline-block;
position: absolute;
}
.tracks {
background-color: #000;
}
.hclanes {
background-color: #3498db;
height: 2px;
}
.lclanes {
background-color: #3498db;
}
.paved {
background-color: #138d75;
height: 2px;
}
.natural {
/*10px color then 2px transparent -> repeat this for dash lines!*/
background: repeating-linear-gradient(to right, #138d75 0, #138d75 11px, transparent 11px, transparent 14px)
}
<!DOCTYPE html>
<html>
<body>
<div class=icon>
<img src="https://s3.amazonaws.com/iconbros/icons/icon_pngs/000/000/360/original/layers.png?1510933843" alt="Trulli" class=img>
<div class="card-body">
<b>Railroad Layers</b>
<div class='train-layer-options'>
<div class="layer-line tracks"></div>
<span class="layer-text">Tracks<br></span>
<div class="layer-fill one-mile"></div>
<span class="layer-text">Sound Buffer (1 mile)<br></span>
<div class="layer-fill half-mile"></div>
<span class="layer-text">Sound Buffer (1/2 mile)<br></span>
<div class="layer-fill onehun-yrds"></div>
<span class="layer-text">Sound Buffer (100 yards)<br></span>
</div>
<b>Bike Lane Layers</b>
<div class='bike-layer-options'>
<div class="layer-line hclanes"></div>
<span class="layer-text">High Comfort Lanes<br></span>
<div class="layer-line lclanes"></div>
<span class="layer-text">Low Comfort Lanes<br></span>
</div>
<b>Multiuse Trail Layers</b>
<div class='bike-layer-options'>
<div class="layer-line paved"></div>
<span class="layer-text">Paved Trails<br></span>
<div class="layer-line natural"></div>
<span class="layer-text">Natural Trails<br></span>
</div>
</div>
</div>
</body>
</html>
If you just need a more width on div when hover, try this
<div class="default"></div>
.default {
width: 150px;
height: 100px;
background-color: teal;
transition: all 0.5s ease;
::hover {
width: 200px;
transition: all 0.5s ease;
}
}
.icon {
height: 48px;
width: 48px;
}
.icon:hover~.card-body {
display: block;
}
.img {
width: 48px;
height: 48px;
}
.card {
background: black !important;
box-shadow: 5px 10px 18px #888888;
}
.card-body {
background: #f5f5f5;
font-size: 14px;
display: none;
}
I'm trying to obtain the same result that is located here where the user can mouse over the layer icon in the upper right-hand corner and a div expands/transitions with information. I created two divs, one for the icon and one for the information but
I'm not sure how to create the mouseover effect. Here is my JSFiddle if anyone is interested in helping me out. Thanks! https://jsfiddle.net/prime90/vwqs38gL/20/ HTML
<div class=icon>
<img src="https://s3.amazonaws.com/iconbros/icons/icon_pngs/000/000/360/original/layers.png?1510933843" alt="Trulli" class=img>
</div>
<div class="card-body">
<b>Railroad Layers</b>
<div class='train-layer-options'>
<div class="layer-line tracks"></div>
<span class="layer-text">Tracks<br></span>
<div class="layer-fill one-mile"></div>
<span class="layer-text">Sound Buffer (1 mile)<br></span>
<div class="layer-fill half-mile"></div>
<span class="layer-text">Sound Buffer (1/2 mile)<br></span>
<div class="layer-fill onehun-yrds"></div>
<span class="layer-text">Sound Buffer (100 yards)<br></span>
</div>
Related
So I've been working on a website (one of my first official ones) and I have been doing it in the Atom editor. I use one of the live preview packages and have built the entire website using that. When I finally got it to a point where I wanted to upload it, I use a host called 000webhost. I upload it and go to the URL, but suddenly my media queries have stopped working. It's very odd because for some reason all of the CSS inside the media query (which sizes it for mobile) has stopped working. The menu button that is used for the mobile menu shows up, as well as the background image used on mobile. However, when I open the file locally or open it in the live preview, everything displays the way it should on mobile vs desktop. I'll post the index.html file and the CSS file to go along with it. Thanks in advance for any help! (btw I know there are lots of posts about media queries not working, but I have looked through at least 15 of them and nothing has helped) ((pardon the probably sloppy code))
/* styles.css: */
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #FF0000;
}
body {
font-family: 'Oswald', sans-serif;
}
/* Links */
a {
text-decoration: none;
color: #000000;
}
a:hover {
color: #808080;
}
a:active {
color: #696969;
}
.white-link {
text-decoration: none;
color: #ffffff;
}
/* Nav */
#nav-bar {
position: fixed;
width: 100%;
left: 0px;
top: 0px;
background-color: #ffffff;
z-index: 2;
box-shadow: 10px 3px 6px #696969;
}
#nav-logo {
display: inline-block;
padding-left: 90px;
opacity: 1;
transition: opacity 0.6s ease;
}
#nav-logo:hover {
opacity: 0.5;
}
#nav-logo:active {
opacity: 0.3;
}
#nav-pages {
position: relative;
top: 50%;
transform: translateY(-35%);
display: inline-block;
font-size: 270%;
padding-left: 50px;
}
#mobile-menu {
display: block;
}
.nav-link {
padding-left: 40px;
padding-right: 40px;
opacity: 1;
transition: opacity 0.6s ease;
}
.nav-link:hover {
opacity: 0.5;
}
.nav-link:active {
opacity: 0.3;
}
.current {
opacity: 0.5;
}
#nav-media {
position: relative;
display: inline-block;
float: right;
margin-right: 30px;
margin-top: 27px;
}
#menu-icon {
display: none;
position: relative;
float: right;
margin-right: 20px;
margin-top: 20px;
padding: 10px;
background-color: #ffffff;
border-radius: 0px, 0px, 0px, 5px;
}
#close-icon {
display: none;
position: absolute;
top: 20px;
right: 20px;
padding: 10px;
}
.nav-link-media {
padding-left: 10px;
padding-right: 10px;
opacity: 1;
transition: opacity 0.6s ease;
}
.nav-link-media:hover {
opacity: 0.5;
}
.nav-link-media:active {
opacity: 0.3;
}
/* Header */
#header-background-image {
width: 102%;
position: relative;
left: -1%;
z-index: -1;
}
#header-background-mobile {
display: none;
}
#header-message {
position: absolute;
text-align: center;
top: 90%;
left: 37%;
font-size: 300%;
color: #808080;
}
/* Content */
#content {
position: relative;
left: -1%;
width: 102%;
background-color: #ffffff;
}
#mobile {
display: none;
}
.section {
width: 100%;
text-align: center;
}
.section-title {
font-size: 400%;
}
.odd {
background-color: #ffffff;
color: #000000;
}
.even {
background-color: #000000;
color: #ffffff;
}
.container {
width: 90%;
display: inline-block;
padding: 4%;
}
.container2 {
width: 25%;
display: inline-block;
padding: 4%;
}
.container3 {
width: 25%;
display: inline-block;
padding: 4%;
}
.container23 {
width: 50%;
display: inline-block;
padding: 4%;
}
.container23-left {
text-align: left;
width: 50%;
display: inline-block;
padding: 4%;
}
.container23-left .container-title, .container23-left .container-text {
text-align: left;
}
.container-title {
text-align: center;
font-size: 350%;
}
.container-text {
text-align: center;
font-size: 170%;
}
/* Slideshows */
#slideshow-arrows {
width: 100%;
display: inline-block;
left: 0px;
bottom: 370px;
}
.left-arrow, .right-arrow {
cursor: pointer;
padding: 16px;
transition: 0.6s ease;
}
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #000000;
border-radius: 50%;
display: inline-block;
opacity: 1;
vertical-align: 23px;
transition: opacity 0.6s ease;
}
.active, .dot:hover, .left-arrow:hover, .right-arrow:hover {
opacity: 0.5;
}
/* Banner Slideshow */
#banner-slideshow-image {
width: 75%;
transition: opacity .5s ease-in;
}
#banner-slideshow-image+#banner-slideshow-image {
opacity: 0;
}
/* Avatar Slideshow */
#avatar-slideshow-image {
width: 25%;
transition: opacity .5s ease-in;
}
#avatar-slideshow-image+#avatar-slideshow-image {
opacity: 0;
}
#video-slideshow {
width: 640px;
}
#octocat {
width: 50%;
margin: 0 auto;
}
#portrait {
height: 500px;
}
#desk {
height: 300px;
}
/* Form */
input {
font-size: 120%;
}
label {
font-size: 120%;
}
.text-box {
border: none;
border-bottom: solid 3px #000000;
width: 350px;
}
textarea {
border: none;
border-bottom: solid 3px #000000;
font-size: 120%;
width: 350px;
}
input[type="radio"] {
display: none;
}
input[type="radio"]+label span {
display: inline-block;
width: 20px;
height: 20px;
background: url(images/unchecked.png) center no-repeat;
background-size: 15px 15px;
cursor: pointer;
}
label {
cursor: pointer;
}
input[type="radio"]:checked+label span {
background: url(images/checked.png) center no-repeat;
background-size: 15px 15px;
}
input[type="submit"] {
background-color: transparent;
border: none;
font-size: 150%;
padding: 12px;
cursor: pointer;
font-family: 'Oswald', sans-serif;
border-bottom: solid 3px #000000;
opacity: 1;
transition: opacity .5s ease-in;
}
input[type="submit"]:hover {
opacity: 0.5;
}
input[type="submit"]:active {
opacity: 0.3;
}
/* Mobile */
#media only screen and (max-width: 1024px) {
#nav-bar {
background-color: transparent;
box-shadow: none;
}
#nav-logo, #nav-pages, .nav-link, #nav-media {
display: block;
float: none;
}
#nav-logo {
width: 50%;
margin: 0 auto;
padding: 0px;
padding-bottom: 70px;
text-align: center;
}
#nav-pages {
width: 90%;
margin: 0 auto;
text-align: center;
font-size: 200%;
padding-left: 0px;
}
#nav-media {
width: 70%;
margin: 0 auto;
text-align: center;
}
#menu-icon {
display: block;
}
#close-icon {
display: block;
}
#header-background-image {
display: none;
}
#header-background-mobile {
display: block;
position: relative;
z-index: -1;
left: 0px;
top: 0px;
width: 100%;
}
#header-message {
display: none;
}
#content {
position: relative;
left: -1%;
width: 102%;
background-color: #ffffff;
}
#desktop {
display: none;
}
#mobile {
display: block;
}
#mobile-menu {
display: none;
z-index: 2;
background-color: #ffffff;
width: 100%;
}
.section {
width: 100%;
text-align: center;
}
.section-title {
font-size: 300%;
}
.odd {
background-color: #ffffff;
color: #000000;
}
.even {
background-color: #000000;
color: #ffffff;
}
.container {
width: 90%;
display: inline-block;
padding: 4%;
}
.container2 {
width: 90%;
display: inline-block;
padding: 4%;
}
.container3 {
width: 90%;
display: inline-block;
padding: 4%;
}
.container23 {
width: 90%;
display: inline-block;
padding: 4%;
}
.container23-left {
width: 90%;
display: inline-block;
padding: 4%;
}
.container23-left .container-title, .container23-left .container-text {
text-align: center;
}
.container-title {
font-size: 300%;
}
.container-text {
font-size: 140%;
}
.dot {
display: none;
}
#banner-slideshow-image {
width: 90%;
}
#avatar-slideshow-image {
width: 90%;
}
#video-slideshow {
width: 90%;
}
#portrait {
width: 90%;
height: auto;
}
#desk {
width: 90%;
height: auto;
}
.text-box {
width: 90%;
}
textarea {
width: 90%;
}
}
<!-- index.html: -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Home | NRDesign</title>
<link rel="shortcut icon" type="image/png" href="files/images/logo-dark.png">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<link rel="stylesheet" type="text/css" title="Main" href="files/styles.css">
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body>
<!--- Nav --->
<div id="nav">
<div id="nav-bar">
<div id="mobile-menu">
<div id="nav-logo"><img src="files/images/logo-dark.svg" width="90px" height="90px" alt="nav-logo" /></div>
<div id="close-icon"><img src="files/images/close.svg" width="40px" height="40px" /></div>
<div id="nav-pages">
<a class="nav-link current" href="#">Home</a>
<a class="nav-link" href="about.html">About Me</a>
<a class="nav-link" href="portfolio.html">My Portfolio</a>
<a class="nav-link" href="contact.html">Contact Me</a>
</div>
<div id="nav-media">
<a class="nav-link-media" href="https://twitter.com/ngregrichardson" target="_blank"><img src="files/images/twitter-logo.svg" width="40px" height="40px" alt="twitter-logo" /></a>
<a class="nav-link-media" href="https://www.youtube.com/channel/UCUB_cxZFm_72B5AVvZpJpYg" target="_blank"><img src="files/images/youtube-play-button.svg" width="40px" height="40px" alt="youtube-logo" /></a>
<a class="nav-link-media" href="https://github.com/ngregrichardson" target="_blank"><img src="files/images/github-logo.svg" width="40px" height="40px" alt="github-logo" /></a>
</div>
</div>
<div id="menu-icon"><img src="files/images/menu.svg" width="40px" height="40px" /></div>
</div>
</div>
<!-- Header -->
<div id="header">
<div id="header-background">
<img id="header-background-image" src="files/images/header-background.jpg" alt="header-background" />
</div>
<div id="header-background">
<img id="header-background-mobile" src="files/images/header-background-mobile.jpg" alt="header-background" />
</div>
</div>
<!-- Content -->
<div id="content">
<div id="desktop">
<div class="section odd">
<div class="container3">
<div class="container-title">Graphic Design</div>
<div class="container-text">To create logos, banners, and avatars, I use a mixture of Cinema 4D, Adobe Photoshop, and Adobe Illustrator.</div>
</div>
<div class="container3">
<div class="container-title">About Me</div>
<div class="container-text">Welcome! My name is Noah Richardson and I am a 17 year old graphic designer, programmer, and comuter enthusiest. I created this website to make everything I've worked on public so that others can use it in their own projects and to learn. Enjoy!</div>
</div>
<div class="container3">
<div class="container-title">Programming</div>
<div class="container-text">Through lots of self-learning, I have taught myself upwards of sixteen programming languages, mainly including Java, Python, and C#.</div>
</div>
</div>
</div>
<div id="mobile">
<div class="section odd">
<div class="container3">
<div class="container-title">About Me</div>
<div class="container-text">Welcome! My name is Noah Richardson and I am a 17 year old graphic designer, programmer, and comuter enthusiest. I created this website to make everything I've worked on public so that others can use it in their own projects and to learn. Enjoy!</div>
</div>
<div class="container3">
<div class="container-title">Graphic Design</div>
<div class="container-text">To create logos, banners, and avatars, I use a mixture of Cinema 4D, Adobe Photoshop, and Adobe Illustrator.</div>
</div>
<div class="container3">
<div class="container-title">Programming</div>
<div class="container-text">Through lots of self-learning, I have taught myself upwards of sixteen programming languages, mainly including Java, Python, and C#.</div>
</div>
</div>
</div>
<div class="section even">
<div class="container2">
<div class="container-title">Visual Effects</div>
<div class="container-text">At the start of my YouTube channel, I began to edit my own videos and try different visual effect creations. I began to improve my workflow by editing videos with Sony Vegas Pro and using Adobe After Effects to create special effects.</div>
</div>
<div class="container2">
<div class="container-title"></div>
<div class="container-text"></div>
</div>
<div class="container2">
<div class="container-title">Visual Effects</div>
<div class="container-text">To work with visual effects and video editing I use Sony Vegas Pro 14, Adobe After Effects, Adobe Premiere Pro, and Cinema 4D.</div>
</div>
</div>
<div class="section odd">
<div class="section-title">My Portfolio</div>
<div id="slideshow">
<img id="banner-slideshow-image" class="fade" src="files/images/slideshows/banners/avay-banner.jpg" alt="banner-slideshow-image" />
<div id="slideshow-arrows">
<img id="banner-left-arrow" class="left-arrow fade" src="files/images/slideshows/left-arrow.png" width="30px" height="30px" onclick="plusBanner(-1)" />
<span class="dot bannerDot active" onclick="currentBanner(0)"></span>
<span class="dot bannerDot" onclick="currentBanner(1)"></span>
<span class="dot bannerDot" onclick="currentBanner(2)"></span>
<span class="dot bannerDot" onclick="currentBanner(3)"></span>
<span class="dot bannerDot" onclick="currentBanner(4)"></span>
<span class="dot bannerDot" onclick="currentBanner(5)"></span>
<span class="dot bannerDot" onclick="currentBanner(6)"></span>
<span class="dot bannerDot" onclick="currentBanner(7)"></span>
<span class="dot bannerDot" onclick="currentBanner(8)"></span>
<span class="dot bannerDot" onclick="currentBanner(9)"></span>
<span class="dot bannerDot" onclick="currentBanner(10)"></span>
<span class="dot bannerDot" onclick="currentBanner(11)"></span>
<span class="dot bannerDot" onclick="currentBanner(12)"></span>
<span class="dot bannerDot" onclick="currentBanner(13)"></span>
<span class="dot bannerDot" onclick="currentBanner(14)"></span>
<span class="dot bannerDot" onclick="currentBanner(15)"></span>
<span class="dot bannerDot" onclick="currentBanner(16)"></span>
<span class="dot bannerDot" onclick="currentBanner(17)"></span>
<span class="dot bannerDot" onclick="currentBanner(18)"></span>
<span class="dot bannerDot" onclick="currentBanner(19)"></span>
<span class="dot bannerDot" onclick="currentBanner(20)"></span>
<img id="banner-right-arrow" class="right-arrow fade" src="files/images/slideshows/right-arrow.png" width="30px" height="30px" onclick="plusBanner(1)" />
</div>
</div>
</div>
</div>
</div>
<script src="jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="index.js" type="text/javascript"></script>
<script src="mobile.js" type="text/javascript"></script>
</body>
</html>
The files are most likely cached.
You can veryfy this by opening the inspector F12, go to the Network tab and do an normal refresh of the page. In the size column, you will see either the file's size or something like (From disk cache).
The simple way to solve this locally is to clear your device's cache.
If you are running Google Chrome, open your website and open inspector F12, then click the refresh icon and select Empty Cache and hard reload.
Remember, this will only update the page for you. If another person has also visited the site before your change, they will most likely also have the site cached.
You can change what files should be cached and for how long by editing your .htaccess file. This simply tells the visitors browser how long it should wait until fetching the resource again.
Example caching-control:
If you edit a media-query and publish it to your site as a css file. This will not be "live" at your visitors before 1 month after they first visited your site / their cache was renewed.
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
I am doing a popup image with close button and dimmed background. When the popup is displayed and users click outside of it, it supposes to close the popup. It works fine on other browser, but not safari. I found on Z-index problems on ipad that I need to put -webkit-transform: translate3d(0,0,0) to the same DOM level but I am not really sure about the concept. Can someone help me, please?
Here is my code:
/**********************HTMl*********************/
<body id="price">
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<?php include('header.php')?>
<div id="content-border" >
<div id="content">
<h1><strong>Packages</strong></h1>
<P id="package-p"></P>
<div>
<div id="price-col">
<button class="img-circle" id="price-circle" id="myBtn1" onClick="openPopup(1)">
<div>
<h4></h4>
<span id="currency">$</span>
<span id="price-large"></span>
<p id="price-small"></p>
<p></p>
</div>
</button>
</div>
<div id="myModal1" class="popup">
<div class="popup-content">
<img src="images/The-Apprentice_low.jpg" id="popup-content1"><span class="closeBtn" onClick="closePopup()">×</span>
</div>
</div>
<div id="price-col">
<button class="img-circle" id="price-circle" id="myBtn2" onClick="openPopup(2)">
<div>
<h4></h4>
<span id="currency">$</span>
<span id="price-large"></span>
<p id="price-small"></p>
<p></p>
</div>
</button>
</div>
<div id="myModal2" class="popup">
<div class="popup-content">
<img src="images/The-Celebrity-Chef_low.jpg" id="popup-content2"><span class="closeBtn" onClick="closePopup()">×</span>
</div>
</div>
</div>
</div>
</div>
<?php include('footer.php')?>
</div>
</div>
</div>
<?php include('html-body-end.php')?>
</body>
/*************************CSS***********************/
#package-p{
background-color: #fff;
color: #000;
padding: 10 20;
text-shadow: none;
}
#price-col{
margin:0 auto;
width:50%;
float: left;
text-align: center;
}
#price-circle{
margin: 30 auto;
background: #ffffff;
padding: 35px;
text-align: center;
height: 250px;
width: 250px;
display: table;
color: #222222;
box-shadow: 0px 0px 10px 5px rgba(206, 44, 44, 0.5);
border: 0;
transition: all 0.3s;
-moz-transition: all 0.3s; /* Firefox 4 */
-webkit-transition: all 0.3s; /* Safari and Chrome */
-o-transition: all 0.3s; /* Opera */
}
#price-circle > div{
display: table-cell;
vertical-align: middle;
}
#currency{
font-size: 30px;
}
#price-circle:hover{
box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.5);
background-color: #ce2c2c;
color: #fff;
}
/*Popup*/
.popup {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
/* padding-top: 300px; Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
text-align: center;
}
.popup-content {
margin: auto;
color: #ffffff;
display: inline-block;
position: relative;
}
.popup::after, .popup::before{
display: block;
content: "";
height: 5%;
}
.popup-content img{
max-height: 90vh;
max-width: 90vw;
min-height: 170px;
min-width: 240px;
z-index: 10;
}
/* The Close Button */
.closeBtn{
color: rgba(255,255,255,5);
font-size: 36px;
font-weight: bold;
position: absolute;
margin-top: -2.1vh;
right: 0;
display: inline-block;
z-index: 10;
}
.closeBtn:hover, .closeBtn:focus{
color: #000;
cursor: pointer;
}
Thanks.
One part of this html page disappeared in google chrome,but it is OK in firefox .I check the console part of browser ,every element is right,but it just can't appear in google chrome.here are the pictures,I add a roll animation to the two little balls.I don't think it was the animation cause the disappearence, because I delete the animation jquery file,but nothing changed...
<div class="advantage" >
<div class="adv_wrapper">
<div class="adv_header">
<div class="line2 horizon2"></div>
<div class="adv_title horizon2">ADVANTAGE</div>
<div class="line2 horizon2"></div>
</div>
<div class="adv_content">
<div class="ball_content">
<div class="ball1 ball">
<div class="ball1_inner"><img src="images/adv/left.png"></div>
</div>
<div class="ball2 ball"></div>
<div class="ball3 ball">
<div class="ball3_inner"><img src="images/adv/right.png"></div>
</div>
</div>
<div class="target"></div>
<div class="target_des">
<a class="szll item" href="">AAA</a>
<a class="zczz item" href="">BBB</a>
<a class="yjjs item" href="">CCC</a>
<a class="zyhz item" href="">DDD</a>
</div>
</div>
css:
.advantage .target{
width: 100%;
height: 340px;
background:url(../images/adv/target.png);
/*border:solid 1px red;*/
}
.target_des{
/*border:solid 1px black;*/
height: 100px;
}
.target_des>.item{
float: left;
font-family: "黑体";
font-size: 18px;
color: rgb(160,160,167);
width: 90px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 5px;
/*border:solid 1px red;*/
}
.target_des>.item::after {
content: "";
border-radius: 5px;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
transform: background-color .3s;
}
.target_des>.item:hover {
background-color: rgb(30,148,211);
color: white;
-webkit-transform: scale(1.15, 1.15);
transform: scale(1.15, 1.15);
}
.target_des>.item:hover::after {
opacity: 1;
}
.szll{
display: inline-block;
margin-left: 40px;
margin-right: 165px;
}
.zczz{
display: inline-block;
margin-right: 300px;
}
.yjjs{
display: inline-block;
margin-right: 170px;
}
js:
$(document).ready(function(){
setInterval(function(){
$(".ball1_inner").addClass("roll-left").one('animationend',function(){
$(this).removeClass("roll-left");
$(".ball3_inner").addClass("roll-right").one('animationend',function(){
$(this).removeClass("roll-right");
})
})
},8000);
})
in google chrome
in firefox
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>
Good day! I'm having a struggle to aligned the jumbtron to my calendar icon. And the elements of the jumbtron is not inside of it. Can someone help me how to solve this? Ideas? i just started studying bootstrap and css.
Here's the picture.
here is my html code.
<div class="events">
<div class="container">
<div class="row">
<div class= "col-sm-4 col-xs-25">
<h4 id="event"><i class="fa fa-calendar" aria-hidden="true"></i> Upcoming Events</h4>
<hr class="carved">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<div class="container">
<div class="jumbotron">
<h4>Sample Title</h4>
<p>IT Thesis defense</p>
<h6>7:00 AM - 8:00 PM</h6>
</div>
</div>
<hr class="divider">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
<hr class="divider">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
</div>
<div class= "col-sm-8 col-xs-25">
<h4 id="event"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Latest News</h4>
<hr class="carved">
</div>
</div>
</div>
</div>
here is my css
#event {
color: #a92419;
}
hr.carved {
clear: both;
float: none;
width: 100%;
height: 2px;
border: none;
background: #ddd;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, rgb(126,27,18)),
color-stop(0.5, rgb(211,45,31))
);
background-image: -moz-linear-gradient(
center top,
rgb(126,27,18) 50%,
rgb(211,45,31) 50%
);
}
.date {
display: block;
width: 60px;
height: 60px;
margin-bottom: 20px;
background: #fff;
text-align: center;
font-family: 'Helvetica', sans-serif;
position: relative;
}
.date .month {
background: #a92419;
display: block;
padding-bottom: 5px;
padding-top: 5px;
color: #fff;
font-size: 10px;
font-weight: bold;
border-bottom: 2px solid #a92419;
box-shadow: inset 0 -1px 0 0 #a92419;
}
.date .day {
display: block;
margin: 0;
padding-bottom: 10px;
padding-top: 5px;
text-align: center;
font-size: 20px;
color:#a92419;
box-shadow: 0 0 3px #ccc;
position: relative;
}
.date .day::after {
content: '';
display: block;
height: 95%;
width: 96%;
position: absolute;
top: 3px;
left: 2%;
z-index: -1;
box-shadow: 0 0 3px #ccc;
}
.date .day::before {
content: '';
display: block;
height: 90%;
width: 90%;
position: absolute;
top: 6px;
left: 5%;
z-index: -1;
}
.jumbotron {
width: 300px;
height: 100px;
margin:none;
}
.jumbotron p {
font-size:12px;
}
The .container class carries its own width(s) and is intended to be used as a outer wrapper for your layout. Because of this, they do not tend to nest well. The one you have as a sibling of your .date classed elements is breaking the layout.
As for the spacing of the .jumbotron contents, Bootstrap assigns some pretty dramatic padding to that class by default. Consider overwriting that with your own values in your .jumbotron rule. The other issue — the .jumbotron contents bleeding out of their container — that is a result of the height: 100px you are setting. You can stop the contents from taking up space beyond the boundaries of the .jumbotron by adding/modifying its overflow property. This may be a matter of opinion but I think it is usually better to avoid setting height in the CSS and let the contents define the size of the container — especially in cases where the content is CMS/client driven.
If you remove the .container, you’ll still have the problem of the .date and .jumbotron stacking vertically. To address that, you might consider treating Date element as .row with a column for your .date element, and a column for that Date’s event(s).
<hr class="carved">
<div class=“row”><!-- the Date wrapper -->
<div class="col-sm-4">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div>
</div>
<div class="col-sm-8"><!-- this column holds all the Events for this Date -->
<div class="jumbotron">
<h4>Sample Title</h4>
<p>IT Thesis defense</p>
<h6>7:00 AM - 8:00 PM</h6>
</div>
</div>
</div>
Note: The new structure will require a bit of adjustment to some of your CSS width properties, and the col- device/sizes I put on the Date and Event columns are just examples — size as needed.
<div class="container">
<div class="row">
<div class="col-md-2">
<h4 id="event"><i class="fa fa-calendar" aria-hidden="true"></i> Upcoming Events</h4>
<hr class="carved">
<div class="date">
<span class="month">August</span>
<h1 class="day">28</h1>
</div><!-- date -->
</div><!-- md2 -->
<div class="col-md-10">
<h4 id="event"><i class="fa fa-newspaper-o" aria-hidden="true"></i> Latest News</h4>
<hr class="carved">
<div class="jumbotron">
<h4>Sample Title</h4>
<p>IT Thesis defense</p>
<h6>7:00 AM - 8:00 PM</h6>
</div><!-- jumbo -->
</div><!-- md10 -->
</div><!-row>
</div><!-- container -->
+
#event {
color: #a92419;
}
hr.carved {
clear: both;
float: none;
width: 100%;
height: 2px;
border: none;
background: #ddd;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, rgb(126,27,18)),
color-stop(0.5, rgb(211,45,31))
);
background-image: -moz-linear-gradient(
center top,
rgb(126,27,18) 50%,
rgb(211,45,31) 50%
);
}
.date {
display: block;
width: 60px;
height: 60px;
margin-bottom: 20px;
background: #fff;
text-align: center;
font-family: 'Helvetica', sans-serif;
position: relative;
}
.date .month {
background: #a92419;
display: block;
padding-bottom: 5px;
padding-top: 5px;
color: #fff;
font-size: 10px;
font-weight: bold;
border-bottom: 2px solid #a92419;
box-shadow: inset 0 -1px 0 0 #a92419;
}
.date .day {
display: block;
margin: 0;
padding-bottom: 10px;
padding-top: 5px;
text-align: center;
font-size: 20px;
color:#a92419;
box-shadow: 0 0 3px #ccc;
position: relative;
}
.date .day::after {
content: '';
display: block;
height: 95%;
width: 96%;
position: absolute;
top: 3px;
left: 2%;
z-index: -1;
box-shadow: 0 0 3px #ccc;
}
.date .day::before {
content: '';
display: block;
height: 90%;
width: 90%;
position: absolute;
top: 6px;
left: 5%;
z-index: -1;
}
Result