Hi Im trying to add a hover to my gallery images but I think somewhere some code is preventing it from working. Cant work out what it is though. Help would be awesome. Im just pasting html for the first image
<div class="images">
<h1>Work</h1>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="images/thumb_diesel.jpg">
<img src="images/thumb_diesel.jpg" alt="Diesel Car">
<div class="overlay">
<h6>Diesel Car</h6>
<div class="view">View Case Study</div>
</div>
</a>
</div>
</div>
.images {
width:78%;
margin-left: auto;
margin-right: auto;
}
.gallery {
position: relative;
}
div.gallery img {
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: rgba(0,0,0,0.8);
}
.overlay:hover .overlay {
opacity: 1;
}
h6 {
text-align: center;
font-family: 'Raleway', sans-serif;
font-weight: 700;
font-size: 45px;
color: #fff;
line-height: 1px;
padding-top: 30px;
}
.view {
text-align: center;
font-family: 'Raleway', sans-serif;
font-weight: 700;
line-height: 1px;
border-color: #fff;
border: 5px;
padding: 30px;
margin-left: 90px;
margin-right: 90px;
color: #fff;
font-size: 20px;
}
Thanks
Steve
.gallery:hover .overlay {
opacity: 1;
Please checkout JS Bin
To make the hover work you need to change the following code in your css:
.overlay:hover .overlay {
opacity: 1;
}
to:
.overlay:hover {
opacity: 1;
}
If you want the text "Diesel Car" to be displayed when someone hovers over the image then you need to add the title attribute to the img tag.
Thus your img tag would be like:
<img src="images/thumb_diesel.jpg" alt="Diesel Car" title="Diesel Car">
The alt attribute doesn't work on some webkit-based browsers.
Related
why when the mouse hover over the image the text do not show ?
how to get the visibility of the text using visibility property in css
img{
margin-top: 110px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 50px;
position: relative;
}
.txt{
font-size: 16px;
line-height: 20px;
margin-top: 10px;
text-align: center;
margin-left: 440px;
margin-right: 440px;
visibility: hidden;
}
img:hover .txt{
cursor: pointer;
visibility: visible;
}
<div class="container">
<img src="empty-boxes.svg" style="width:520px;height:190px;">
<p class="number">404</p>
<p class="txt">When communicating via HTTP, the server is required
.</p>
</div>
Add the CSS "~" selector.
img {
margin-top: 110px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
margin-top: 50px;
position: relative;
}
.txt {
font-size: 16px;
line-height: 20px;
margin-top: 10px;
text-align: center;
margin-left: 440px;
margin-right: 440px;
visibility: hidden;
}
img:hover ~ .txt {
cursor: pointer;
visibility: visible;
}
<div class="container">
<img src="empty-boxes.svg" style="width:520px;height:190px;">
<p class="number">404</p>
<p class="txt">When communicating via HTTP, the server is required .
</p>
</div>
You can also change the opacity of the text when hover on image
.txt {
opacity: 0;
}
img:hover~ .txt{
opacity: 1;
}
I recommend you to hover on the image container instead of the image itself. You can add transition on .txt to make it good looking.
EDITED JSFIDDLE
The goal to display a transition upward height when the button is hovered, but this line of CSS .btn-position:hover ~ .bg-transit { height: 430px !important;} seems it expands downwards instead upward. Is there a way to transition UPWARD?
I dont want to add any JS to it.
HTML
<div class="career-wrapper-positions">
<div class="section-positions">
<div class="position-wrap">
<div class="position-box" id="video_interpreter">
<div class="employees"><img src="http://staging.svrs.com/assets/images/careers2018/position-lady1-1.png" alt="SVRS | Video Interpreter positions"></div>
<div class="position-tited-top-bg"></div>
<div class="position-box-info">
<div class="position-header"><h5 class="h5-careers18">CUSTOMER SERVICES</h5></div>
<div class="position-subheader" id="subheader1">positions</div>
<div class="position-p">Individually, passionate about the work. Collectively, the largest sales workforce in the world.</div>
<div class="btn-position">
<button onclick="location.href='#'" class="position-btn" id="btn1-position">Apply now</button></div>
<div class="bg-transit"></div>
</div>
</div>
</div>
</div>
CSS
.section-positions { margin: 0 auto; width: 100%; }
.position-header { text-align: center; }
.position-header p { margin-top: 0; }
.position-wrap { height: 525px; position: absolute; z-index: 10; width: 100%; text-align: center; display: flex; margin-top: 175px; }
.position-box { width: 209px !important; height: 330px; display: block; margin: 20px; background-color: #231f20; z-index: 2;}
.position-tited-top-bg { width: 209px !important; height: 20px; background-color: #231f20; -webkit-transform: skew(0deg, 2deg); transform: skew(0deg, 2deg); margin-top: -15px; position: relative;z-index: -2; }
.position-header { height: 15px;color:#ffbb11; font-size: 22px; font-family:'Source Sans Pro', sans-serif; font-weight: 400; }
.position-subheader { color: #ffbb11; margin-top: 10px; font-family:'Source Sans Pro', sans-serif;}
.position-p { color: #fff; padding: 0 10px 0 10px; font-family:'Source Sans Pro', sans-serif; font-size: 14px; margin-top: 10px; line-height: 20px; }
.position-btn { background-color: #ffbb11; width: 150px; height: 41px; border: none; border-radius: 8px; font-size: 1em; font-weight: 600; cursor: pointer; margin-top: 50px; }
.position-box-info { padding-top: 10px; }
/* this is the button to trigger a new height size transition of the background box */
.bg-transit { width: 209px !important; height: 338px; display: block; background-color: #ff0000; z-index: -1; position: relative; top: -280px; transition-property: height; transition-duration: 0.5s;}
.btn-position:hover ~ .bg-transit { height: 430px !important;}
.position-btn:hover { background-color: #231f20 !important; color: #ffbb11 !important; border: #9c7002 solid 1px; }
.employees { position: absolute; margin-top: -210px; width: 207px; margin-left: 5px; z-index: 9999;}
.position-btn:hover ~ .position-box-info selects all siblings .position-box-info that come after a .position-btn:hover. Since .position-box-info is actually the parent of the .position-btn element, nothing gets selected. In fact, you can't select a parent from a child, so you either have to add a class with javascript or change your HTML.
Also, you seem to miss a </div> closing tag.
I found this modal http://codepen.io/imprakash/pen/GgNMXO pure html and css no js. It's all great and all but how can I make it trigger without using a button or link? I want it to pop up to welcome visitors once the website load.
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
i modified your codepen
body {
font-family: Arial, sans-serif;
background: url(http://www.shukatsu-note.com/wp-content/uploads/2014/12/computer-564136_1280.jpg) no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:not(:target) {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
<a class="button" href="#popup1">Let me Pop up</a>
</div>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Here i am</h2>
<a class="close" href="#popup1">×</a>
<div class="content">
Thank to pop me out of that button, but now i'm done so you can close this window.
</div>
</div>
</div>
You could make it with animations. A quick example:
#popup1 {
animation-name: welcome;
animation-duration: 2s;
}
#keyframes welcome {
0% {
opacity: 0;
}
30% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id="popup1" class="overlay">Hey!</div>
As the technique uses :target psuedo class, you can directly target with appending the id of that pop up element.
Try this, http://codepen.io/imprakash/pen/GgNMXO#popup1
Just appended #popup1 to target. Thus as soon as you open, popup will be targeted and opened.
I'm trying to make this web page and it just has so many issues. I cannot center the #titlediv and the navbar sometimes disappears. I'm not gonna lie: it might be a big fix, I'm really not sure. But here's the link if anyone can possibly salvage it:
http://jsfiddle.net/glenohumeral13/c604vbrn/
Code:
<body>
<div id="parallaxish"></div>
<div id="navbar">
<nav>
Item1
Item2
Item3
</nav>
</div>
<div id="contentdiv">
<div id="welcome">
<div id="titlediv">
<h1>Title will go here</h1>
</div>
</div>
<div class="barrier"></div>
<div id="item1">
<h1>Item1</h1>
</div>
<div class="barrier"></div>
<div id="item2">
<h1>Item2</h1>
</div>
</div>
</body>
CSS
* {
margin: 0;
padding: 0;
}
body {
color: #fff;
background-color: #000;
font-family: Helvetica, Arial, sans-serif;
}
img {
max-width: 100%;
height: auto;
}
#parallaxish {
background-image: url('http://24.media.tumblr.com/tumblr_m54j1nIYN21r0k830o1_500.jpg');
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background-position: center;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
width: 100%;
height: auto;
}
#navbar {
float:right;
height: 30px;
margin-right: 100px;
}
nav a {
text-decoration: none;
display: inline;
list-style-type: none;
padding-right: 15px;
padding-top: 10px;
float: left;
-webkit-transition: color 1s ease-out;
-moz-transition: color 1s ease-out;
-o-transition: color 1s ease-out;
transition: color 1s ease-out;
font-weight: 100;
color: #fff;
-webkit-font-smoothing: antialiased;
}
nav a:hover {
color: #16a085;
}
#welcome {
height: 600px;
width: 100%;
text-align: center;
text-transform: uppercase;
background-color: black;
}
#welcome h1, #item1 h1, #item2 h1 {
font-weight: 100;
-webkit-font-smoothing: antialiased;
}
#titlediv {
border: 2px solid #fff;
width: 180px;
margin: auto;
padding: auto auto;
position: absolute;
left: 0;
right: 0;
overflow: auto;
}
.barrier {
height: 120px;
width: 100%;
background: transparent;
}
#item1 {
height: 600px;
width: 100%;
text-align: center;
background-color: white;
color: #16a085;
}
#item1 h1, #item2 h1 {
padding: 5% 0;
}
#item2 {
height: 600px;
width: 100%;
text-align: center;
background-color: black;
color: white;
}
First of all, a demo!
http://jsfiddle.net/ImagineStudios/c604vbrn/10/
What it looks like what you are trying to do is vertically and horizontally center it, in the div, correct?
There is a simple way to do this with css, that i find very useful:
<div id="welcome">
<div id="titlediv">
<h1>Title will go here</h1>
</div>
</div>
First of all, we give position:relative; to the div id="welcome":
/*With your current CSS*/
#welcome {
height: 600px;
width: 100%;
text-align: center;
text-transform: uppercase;
background-color: black;
position:relative;
}
And then, the magic! The <div> id="titlediv" is given position:absolute; and a few other rules:
#titlediv {
border: 2px solid #fff;
width: 180px;
margin: auto;
padding: auto auto;
position: absolute;
width: 180px;
height: 76px;
left: 0;
right: 0;
top:0;
bottom:0;
overflow: auto;
}
This little trick only works if the width and height are declared.
Now, for the nav bar easily fixed:
#navbar {
position:absolute;
top:0;
right:100px;
height: 30px;
z-index:10;
}
And to wrap it all up, a full screen demo!
http://jsfiddle.net/ImagineStudios/c604vbrn/10/embedded/result/
http://stickyjs.com/ will help you!
I
//LOAD THE FILES
<script src="jquery.js"></script>
<script src="jquery.sticky.js"></script>
/RUN THE SCRIPT
<script>
$(document).ready(function(){
$("#navbar").sticky({topSpacing:0});
});
</script>
if i were in your place i'll try to make my page by using a framework like bootstrap or foundation , if you want a lightweight one you can always try skeleton is easy to use & you can find snippets around the web very easily :
http://getbootstrap.com/ |
http://bootsnipp.com/
hopefully i helped you & next time try using google first
I'm looking for a CSS only solution to fade an image in a back DIV when hovering over any section of the DIV, including DIVs that are in front of it.
Here is what I've been able to build so far: http://jsfiddle.net/kqo10jLb/
The CSS:
#caseouter {
position: relative;
top: 0px;
}
#casewrap2 {
background-color: #000;
}
#casetitle {
font-size: 30px;
width: 100%;
display: block;
text-transform: uppercase;
text-align: center;
padding: 10px 0px 0px 0px;
color: #fff;
margin-bottom: 0px;
}
#casethumb {
width: 100%;
display: block;
margin-bottom: -100px;
opacity: 1;
transition: .2s opacity ease .2s;
height: 100px;
}
#casesecondline {
font-size: 30px;
color: #666;
text-transform: uppercase;
margin: 0 auto;
display: block;
width: 100%;
text-align: center;
color: #fff;
margin-top: -10px;
padding: 0px;
}
#casethumb img {
width: 100%;
}
#casethumb:hover {
opacity: .75;
}
#casetitle:hover ~ #casethumb a {
opacity: .75;
}
#casesecond:hover ~ #casethumb a {
opacity: .75;
}
And the HTML:
<div id="casewrap2">
<div id="casethumb">
<a href="www.google.com">
<img src="http://ringer.tv/wp-content/uploads/2014/08/case_bravo.jpg">
</a>
</div>
</div>
<div id="caseouter">
<a href="www.google.com">
<div id="casetitle">Headline</div>
<div id="casesecondline">Subheadline</div>
</a>
</div>
As you'll see, the back image fades on hover, however, it will not fade when I hover over the headline and subheadline text. I've tried using #casetitle:hover ~ #casethumb a but I'm obviously doing something wrong. Thanks!
Is this what you're after? http://jsfiddle.net/kqo10jLb/1/
I moved the caseouter into the casewrap2 object and changed the hover to this:
#casewrap2:hover #casethumb {
opacity: .75;
}