I am trying to add a colored hover over an image on a slick carousel on Wordpress and can't figure out how to.
So the general gist is to make an element appear in front of the image which has the colour you want as the hover effect. So you may need to alter the plugins html, but as you are using wordpress i would see in the plugin documentation if there is a way to overwrite the relevant file in your child theme as you should never directly alter a parent file in this situation.
here is a rough example you can follow:
<div class="overlay_wrapper">
<div class="layer_1">
<p>image goes here</p>
</div>
<div class="layer_2">
</div>
</div>
.overlay_wrapper {
width: 500px;
height: 200px;
position: relative;
background-color: #000;
margin: 0 auto;
color: #fff;
}
.overlay_wrapper .layer_2 {
position: absolute;
opacity: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background: rgba(255, 255, 255, 0.8);
transition: 0.5s ease-in-out;
-webkit-transition: 0.5s ease-in-out;
}
.overlay_wrapper:hover .layer_2 {
opacity:1;
}
Working example: https://codepen.io/FEARtheMoose/pen/oPXrgJ
Related
I'm building a "staff" page with a liquid, four-column layout. I've placed a div element, absolutely positioned on top of the photo of each staff member to act as a button/link. My problem is that when I align this overlay div to bottom:0 and right:0 I will get the occasional 1 pixel gap between the image and the overlay as I resize the window. It seems this is a function of some sort of round-off error.
I've searched this site and others for help on this, but I haven't found this issue explicitly discussed anywhere. Any insights are greatly appreciated.
The page in question can be seen here:
communicationdesign.com/cwt-beta/about.html
Resize the window to see the occasional error/gap...
Here is the relevant markup:
<div class="staff-block">
<div class="staff-photo">
<img src="img/gruber.jpg" class="portrait" />
<a href="gruber.html">
<div class="plus-link">
<div class="plus-sign">+</div>
</div>
</a>
</div>
<div class="caption">
Drew Gruber<br /><span class="job-title">Executive Director</span>
</div>
</div>
And here is the CSS:
.staff-block {
position: relative;
width: 22.3%;
float: left;
background-color: #ffc;
margin-right: 3.5%;
}
.staff-photo{
position: relative;
}
.staff-photo img, .board-photo img, .bio-photo img {
width: 100%;
}
.portrait {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.plus-link {
transition: .5s ease;
opacity: 1;
position: absolute;
bottom: 0;
right: 0;
}
.plus-sign {
background-color: rgba(255,204,78,0.8);
color: white;
font-size: 40px;
line-height: 30px;
padding: 4px 8px 6px;
}
This is an occupational hazard when using percentages. You could use a hack like this:
.staff-photo{
overflow: hidden;
}
.plus-link {
background-color: rgba(255,204,78,0.8); // color on the plus sign parent
position: absolute;
bottom: -5px; // position it over the edge
right: -5px;
padding: 0 5px 5px 0; // and correct the extra space
}
.plus-sign {
background-color: transparent; // or remove bg color
}
Thanks for all the help, solution below.
I am new to web development, and I am trying to rebuild a website to practice my CSS.
The website in questions is http://www.divecarib.com. If you scroll down to the pictures on that home page, you notice that they "fade" on hover. How do I achieve that fade? Using opacity makes the background image come through, which is not how it's implemented on that website.
Thank you for the help!
Below is my fade attempt...did not include the code in original post because I thought it was irrelevant given that I was on the wrong path.
.fade {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.fade:hover {
opacity: 0.7;
}
---Solution (at least how I did it - taken from http://jsbin.com/igahay/1/edit?html,output)-----
<div class=picSet>
<figure class="tint">
<p id="#p1">Student in training</p>
<p id="#p2" style="position: absolute;top: 36px; color: white;">SKAT crew doing open water training</p>
<img id=pic1 src="Media/pic1.jpg" />
</figure>
</div>
.tint {
position: relative;
float: left;
margin: 3px;
cursor: pointer;
}
.tint:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.tint:hover:before {
content: "";
background: rgba(96,150,179, 0.54);
border: 5px solid #0B689A;
border-radius: 20px;
margin: 3px;
}
.tint p{
position:absolute;
top:20px;
left:20px;
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 0.75em;
display: none;
color: #0B689A;
}
.tint:hover > p{
display: block;
}
You can't fade the opacity of an element, without having what's behind showing through.
The site you linked to isn't fading the opacity of the image, but introducing a translucent layer over the top with the text in.
If you just want to fade the image, but not have the background show through, you could put a wrapper around the image with a solid background colour. But there's no way to fade an image and not have what's behind show through.
.container {
background:#FFF;
}
.container img:hover {
opacity:0.8;
}
I am looking for some advice on how to add rollover effect to my WordPress post images. Now the image are pulled in and set as background images so It makes it tricky for me. Here is my code:
<div class="portfolio-image" style="background: url(<?php echo $src[0]; ?> ); background-size: cover;">
<h2 style="margin:0; padding: 0;"><?php the_title(); ?></h2>
<?php echo get_the_tag_list('<p> | ',' | ','</p>'); ?>
</div>
.portfolio-image{width: 324px; height: 280px; background-repeat:no-repeat; box-sizing: border-box; border:2px solid #fff; padding: 20px; float: left;}
Now I tried wrapping the div and applying a hover effect to that div but it reverses what I want so it hovers over and show my post image. what I need it to do is show the image as normal but when you hover over the image the image darkens and the title to appear over the top. really struggling to figure it out as it is a background image.
You can do this without additional markup by using a pseudo element as the overlay color.
.portfolio-image {
background-image: url(http://lorempixel.com/output/people-q-c-324-280-6.jpg);
width: 324px;
height: 280px;
bg background-repeat: no-repeat;
box-sizing: border-box;
border: 2px solid #fff;
padding: 20px;
float: left;
color: white;
position: relative;
}
.portfolio-image > * {
opacity: 0;
transition: opacity: 0.25s ease;
position: relative;
}
.portfolio-image:hover > * {
opacity: 1;
}
.portfolio-image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0);
transition: background-color 0.25s ease;
}
.portfolio-image:hover:before {
background-color: rgba(0, 0, 0, 0.5);
z-index: 0;
}
<div class="portfolio-image">
<h2>some text</h2>
<p>Lorem ipsum dolor sit amet.</p>
</div>
I would recommend adding another div object that overlays the object with your background image. The new object could contain your text and another background image. The CSS could be something like:
div.overlay {
opacity:0;
/* IE8 or earlier */
filter:alpha(opacity=0);
/* add your positioning styles here */
}
div.overlay:hover {
opacity:0.8;
filter:alpha(opacity=80);
}
I'm trying to make a grid of images that once you hover over one, it's webpage title appears below it, as well as the other images around it changing in opacity.
I have managed to create the opacity mouseover effect I want, but now I'm having trouble making the page heading images appear as you hover over the corresponding image. I hope that makes sense
Hope someone can help. Here is my code
HTML:
<div style="position: relative; left: 140px; top: 0px;">
<img src="window.jpg" style="position: relative; top: 0; left: 0;"/>
<div id="windowimages">
<a class="image-one"></a><a href="https://example-site.com/music/">
<img src="pic1.jpg/>
<a class="image-two"></a><a href="https://example-site.com/dance/">
<img
src="pic2.jgp"/>
<a class="image-three"></a><a href="https://example-site.com/art/">
<img
src="pic3.jpg" />
<a class="image-four"></a><a href="https://example-site.com/aboutus/">
<img
src="pic4.jpg"/>
</div>
CSS:
body {
}
#windowimages {
position: absolute;
left: 3px;
top: 4px;
font-size: 0;
width: 198px;
margin: 0 auto;
padding:1px;
overflow:hidden
}
#windowimages img {
width:90px;
height:90px;
margin: 3px;
cursor:pointer;
-webkit-transition:opacity 0.26s ease-out;
-moz-transition:opacity 0.26s ease-out;
-ms-transition:opacity 0.26s ease-out;
-o-transition:opacity 0.26s ease-out;
transition:opacity 2s ease-in-out;
}
#windowimages:hover img {
opacity:0.55;
}
#windowimages:hover img:hover {
opacity:1;
}
If I understood you correctly, it seems like what you want to do is add a title to each image on hover.
Check out this example I wrote: http://jsfiddle.net/arthurcamara/chbsL3pq/
The key part to adding the title was .image:hover:after as you can see above and in the code below:
.grid:hover .image:hover:after {
display: block;
position: absolute;
top: 5px;
width: 90px;
padding: 5px;
content: attr(data-title);
text-align: center;
background-color: #333;
color: #fff;
}
I changed your markup a bit as well to make it more semantic. Check out the example and let me know if that helped :)
I'm working on a site with a knotted rope-style bar that expands to show more information on hover, and I'm having issues getting the animation to look right. (Here's a staging link: http://couchcreative.co/tcc/).
Currently, the bar for the first step will move down to the bottom of the box before it animates upwards to its new position, while I want it to just move up to its new position on hover without starting at the bottom of the hover box. Can anyone help explain why this is happening? The relevant CSS starts with the ".look" class.
Apologies if I'm not explaining this right, but hopefully when you visit the site you'll see what I mean about the animation looking a bit… off. Thanks for the help!
I would rework your HTML structure to make it more semantic and less repetitious.
Demo: http://jsfiddle.net/krmn4/5/
HTML:
<a href="/testicularcancer/" class="look">
<figure><img src="http://couchcreative.co/tcc/img/look.png" /></figure>
<div class="bar"></div>
<div class="off">
<h4>Look</h4>
</div>
<div class="on">
<h4>Relax your scrotum.</h4>
<p>Check your testicles just after you’ve had a bath or shower, when the muscles in the scrotum are relaxed, making it easier for you to feel any lumps, growths or tenderness. Stand in front of the mirror. Look for any swelling on the skin of your scrotum.</p>
<span>Learn More</span>
</div>
</a>
CSS:
.look {
position: absolute;
bottom: 0;
left: 0;
width: 235px;
overflow: hidden;
/* optional styling */
color: #000;
text-align: center;
text-decoration: none;
}
.look h4 {
/* optional styling */
line-height: 48px;
font-size: 20px;
font-weight: bold;
}
.look .bar {
height: 48px;
background: url(http://couchcreative.co/tcc/img/step_1.png) 0 0 repeat-x;
margin: -24px 0 0; /* half of height */
/* necessary so figure img doesn't overlap */
position: relative;
z-index: 1;
}
.look figure,
.look .off,
.look .on {
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
transition: all 300ms linear;
height: 0;
opacity: 0;
overflow: hidden;
}
.look figure {
/* optional styling */
background-color: #b2d5e6;
padding: 12px;
margin: 0;
}
.look .off {
height: 48px;
opacity: 1;
}
/* hover state */
.look:hover .off {
height: 0;
opacity: 0;
}
.look:hover figure {
height: 120px; /* or however tall it needs to be */
opacity: 1;
}
.look:hover .on {
height: 220px; /* or however tall it needs to be */
opacity: 1;
}