I'm managing the website of my company which is based on Wordpress and I try to figure out how to change my contact page.
I've made a codepen of what I want to do : http://codepen.io/EzhnoFR/pen/PNmdxm
html :
<img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/Isa.png" />
<span>Hover</span>
</div>
<div id="cf">
<img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-chute.png" />
<img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/christine-1.png" />
<span> Hover </span>
</div>
<div id="cf">
<img class="bottom" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile-chute.png" />
<img class="top" src="http://www.alabama-pub.com/wp-content/uploads/2016/03/cecile.png" />
<span> Hover </span>
</div>
</div>
css :
#cf img.top {
-webkit-filter: grayscale(80%);
filter: grayscale(80%);
}
#cf img.top:hover {
opacity:0;
}
span{
position: absolute;
bottom: -150px;
left: 0;
z-index: -1;
display: block;
width: 225px;
margin: 0;
padding: 0;
color: black;
font-size: 25px;
text-decoration: none;
text-align: center;
-webkit-transition: .7s ease-in-out;
transition: .7s ease-in-out;
opacity: 0;
}
#cf img.top:hover ~ span{
opacity: 1;
}
/*-----------------------------------------------------*/
.column {
margin: 15px 15px 0;
padding: 0;
}
.column:last-child {
padding-bottom: 90px;
}
.column::after {
content: '';
clear: both;
display: block;
}
.column div {
position: relative;
float: left;
width: 300px;
height: 200px;
margin: 0 0 0 50px;
padding: 0;
}
.column div:first-child {
margin-left: 0;
}
However, when I add this html to my page and the css in my wordpress custom css, it all mess up as you can see : http://www.alabama-pub.com/contact-new-test/
I've tried a lot of things but I can't get to fix it, does anyone has any idea ?
You have extra < br > under image tag which is causing the issue of height changes on hover.
According to other issue please remove z-index from span tag and you are done :)
see
Related
I'm trying to add a transition-delay to the CSS but everywhere I add it is ineffective.
My CSS is:
.imageBox {
position: relative;
float: left;
transition-delay: 3s;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
display: none;
}
.imageBox:hover .hoverImg {
display: block;
}
My HTML is:
<div style="float:left">
<div class="imageBox">
<img src="https://cdn.discordapp.com/attachments/732623682576580719/1010327699098714282/unknown.png" height="300px" width="300px">
<div class="hoverImg">
<img src="https://cdn.discordapp.com/attachments/732623682576580719/1011368277613760583/Me_Purple.png">
</div>
</div>
</div>
Where should my transition delay and ease go? Thank you!
Transition property doesn't work on "display".
Try this:
.imageBox {
position: relative;
float: left;
}
.imageBox .hoverImg {
position: absolute;
left: 0;
top: 0;
opacity:0;
transition:1s;
transition-delay: 3s;
}
.imageBox:hover .hoverImg {
opacity:1;
}
This doesn't make the div disappear, but rather invisible. It won't work in every scenario, but it should here.
I would like to add a link to an image that has an overlay applied to it. When users hover over the image they get an opaque overlay and text appear. This works great, however I also need users to be able to click that image and taken to a link.
I have pasted my code below - the overlay works but the link portion does not. I believe it's because the overlay is interfering. I tried changing the placement of the link but was unable to do so. I am able to make the '+' be the link, but ideally the entire image should link.
Any thoughts?
JSFiddle
.roomphoto:hover .img__description { transform: translateY(0); }
.roomphoto .img__description_layer { top: 30px; }
.roomphoto:hover .img__description_layer { visibility: visible; opacity: 1; }
.img__description_layer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #cdcbca;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .2s, visibility .2s;
}
.roomphoto {
height: 166px;
}
.img__description {
transition: .2s;
transform: translateY(1em);
z-index: 999;
}
.overlay {
position: relative;
}
.overlay:after {
position: absolute;
content:"";
top:0;
left:0;
width:100%;
height:100%;
opacity:0;
}
.overlay:hover:after {
opacity: .8;
}
.blue:after {
background-color: #1a3761;
}
.img__description a {
color: #fff;
}
.roomselect {
clear: both;
float: none;
width: 100%;
max-width: 1000px;
margin: 0px auto;
padding-top: 20px;
}
.roomselect img {
width: 100%;
margin-bottom: -10px;
}
.room3 {
width: 32%;
text-align: left;
float:left;
}
<div class="roomselect"><div class="room3">
<div class="roomphoto overlay blue">
<a href="http://www.google.com">
<img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
</a>
<div class="img__description_layer">
<p class="img__description">
<span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span>
</p>
</div>
</div>
</div>
You need to rearrange your html in such a way that when you click on image, you are actually clicking on the anchor tag. I have made some changes to your html, let me know if these work. You might have to increase roomphoto height.
<div class="roomselect">
<div class="room3">
<a href="http://www.google.com">
<div class="roomphoto overlay blue">
<img src="https://cdn.mos.cms.futurecdn.net/J9KeYkEZf4HHD5LRGf799N-650-80.jpg" alt="Image Text" />
<div class="img__description_layer">
<p class="img__description"><span style="border-radius: 50%; width: 30px; height: 30px; padding: 0px 14px; border: 1px solid #fff; text-align: center; font-size: 36px;">+</span></p>
</div>
</div>
</a>
</div>
</div>
This question already has answers here:
How to overlay images
(11 answers)
Closed 5 years ago.
I want to highlight an image when a user hovers over it.
To do that, I'd like to put an overlay over everything else (or honestly, I'd be happy putting an overlay over everything including the image, and then putting something to brighten the image as well).
Is there anyway to do this without JS? I'm happy to use a JS solution if that's all that's available, but I was wondering if there was any CSS-only trickery that could manage to do this.
Example HTML would be like this:
<body>
<div>
<Other Elements />
<img src="...." />
</div>
</body>
Preferably everything would be darkened except the <img> tag.
You could use a sibling selector: .container img:hover ~ .overlay { background-color: rgba(0,0,0,0.8); }
body {
}
.container {
position: relative;
text-align: center;
margin: 10px auto 0;
padding-bottom: 10px;
}
.container .other {
display: inline-block;
margin: 20px 10px 10px;
width: 100px;
height: 100px;
background-color: darkorange;
z-index:1;
}
.container img {
display: inline-block;
margin: 10px 10px 10px;
z-index:1;
position: relative;
transition: all 300ms ease;
}
.overlay {
background-color: rgba(0,0,0,0);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
z-index:1;
transition: all 300ms ease;
}
.container img:hover ~ .overlay {
background-color: rgba(0,0,0,0.8);
}
.container img:hover {
z-index: 2;
transform: scale(1.1);
cursor: pointer;
}
<body>
<div class="container">
<div class="other"></div>
<div class="other"></div>
<img src="https://picsum.photos/100/100?image=2" />
<div class="other"></div>
<img src="https://picsum.photos/100/100?image=4" />
<div class="other"></div>
<img src="https://picsum.photos/100/100?image=6" />
<img src="https://picsum.photos/100/100?image=8" />
<div class="overlay"></div>
</div>
</body>
I want to hover over my image and have the text appear in place of image
but I don't want to use jQuery or JavaScript .
#wrapper .text {
position: relative;
bottom: 30px;
left: 0px;
visibility: hidden;
}
#wrapper:hover .text {
visibility: visible;
}
<div id="wrapper">
<img src="kero.png" class="hover" height="200px" width="200px/>
<p class="text">text</p>
</div>
Not sure if I understand correctly what you want, but does this work for you?
Initial Case
#wrapper {
position: relative;
}
.text {
opacity: 0;
position: absolute;
bottom: 0;
}
.hover:hover {
opacity: 0;
}
.hover:hover + .text {
opacity: 1;
}
<div id="wrapper">
<img src="http://placehold.it/200x200" class="hover" />
<p class="text">text</p>
</div>
Extended Case
#wrapper {
display: inline-block;
position: relative;
}
.text {
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transition: opacity .5s;
background: rgba(0, 0, 0, .5);
color: white;
margin: 0;
padding: 10px;
}
.hover {
display: block;
}
#wrapper:hover .text {
opacity: 1;
}
<div id="wrapper">
<img src="http://placehold.it/200x200" class="hover" />
<p class="text">text</p>
</div>
Working fiddle : https://jsfiddle.net/2y67zerm/
U can use either display or visibility attributes
#wrapper .text {
position: absolute;
bottom: 30px;
left: 10px;
top:10px;
visibility: hidden;
display:none;
}
#wrapper:hover .text {
visibility: visible;
display:block;
z-index:1000;
}
<div id="wrapper">
<img src="kero.png" class="hover" height="200px" width="200px" />
<p class="text">text</p>
</div>
Look at this,
http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover
This is an example of "hover".
Let me know if this helps you out.
Thanks
#wrapper{
position:relative;
}
#wrapper .text {
position: absolute;
bottom: 30px;
left: 0px;
visibility: hidden;
}
#wrapper:hover .text {
visibility: visible;
}
#wrapper:hover img{
visibility: hidden;
}
This can be achieved using the display css attribute.
#wrapper p { display: none; }
#wrapper:hover img { display: none; }
#wrapper:hover p { display: block; }
Your example had unecessary classes so they have been removed.
Solution:
<style>
#wrapper p { display: none; }
#wrapper:hover img { display: none; }
#wrapper:hover p { display: block; }
</style>
<div id="wrapper">
<img src="http://i.imgur.com/UHqk6nC.jpg" />
<p>Some text</p>
</div>
See this fiddle for an example: https://jsfiddle.net/nt5vjywu/
Hope that helps!
UPDATE:
Updated fiddle with hovering text on top. Note the reorder of the img and p tag.
https://jsfiddle.net/nt5vjywu/2/
I have a question regarding my previous post:
Animation stop with css3
The slider works perfect in Chrome. In firefox however it is not working properly. Does anyone here have an idea?
Slider can be found here http://jimmytenbrink.nl/slider/
It looks like there is a problem in firefox with positioning absolute + display: table-cell.
My code is as follows:
<header>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div >
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
<div>
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
</header>
And the css;
header {
margin-top: 10px;
width: 1185px;
display: table;
overflow: hidden;
background-color: #000;
height: 500px;
}
header > div {
background: url('./images/iron_man_bg.jpg');
width: 123.8px;
height: 500px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
border: 2px solid #fff;
overflow: hidden;
}
header div:first-child {
margin-left: 0px;
}
header div:last-child{
margin-right: 0px;
}
header div:hover span {
left: 50px;
opacity: 1;
}
header > div img {
position: absolute;
left: -240px;
-webkit-transition: all .3s;
transition: all .3s;
-webkit-filter: grayscale(1);
overflow:hidden;
}
header > div span {
-webkit-transition: left .3s;
transition: left .3s;
position: absolute;
bottom: 30px;
color: white;
left: -70px;
opacity: 0;
width: 151px;
font-family: 'Fugaz One', cursive;
text-transform: uppercase;
color: #fff;
font-size: 24px;
text-shadow: 0px 0px 10px #f1f1f1;
filter: dropshadow(color=#f1f1f1, offx=0, offy=0);
}
header > div:hover {
width: 920px;
}
header div:hover img {
left: 0px;
-webkit-filter: grayscale(0);
}
Here is what works:
http://codepen.io/jeremyzahner/full/cAEbv
Basically, i added a new container inside the "div" with class .inside. On that i do width:100%; height:100; position:relative; overflow:hidden;. Plus, i did remove the fixed height on the outer divs, since the header already holds that fixed height, it is not necessary to set it again.
It is a knonw "bug" of firefox that it treats display:table-cell; divs like that. I don't think they will fix it soon. So the best workaround (at least in my experience) is another inner wrapper like here.
CSS Modification:
header > div .inside {
position:relative;
width:100%;
height:100%;
overflow:hidden;
}
header > div {
background: url('./images/iron_man_bg.jpg');
width: 123.8px;
position: relative;
-webkit-transition: width .3s;
transition: width .3s;
display: table-cell;
border: 2px solid #fff;
overflow: hidden;
}
HTML Modification:
<div>
<div class="inside">
<img src="./images/ironman.png">
<span>Ironman</span>
</div>
</div>
This was tested in actual version of Chrome and Firefox (on Ubuntu).
Hope this helps