I'm trying to write code that shows text over image and I'm trying to achieve an hover effect. I post the code at http://codepen.io/kikibres/pen/LVxmBG so that you can take a look to see how it works. As you can see, when you hover over the image, it darkened, but the text background isn't affected. Likewise, when you hover over the text background, the image effect isn't activated. I wanted to connect them together but how? It looks like that I might have to edit the html, I think?
Html code:
<div class="fourcolumns">
<div class="productpic">
<a href="#">
<img src="http://i.imgur.com/SZen19w.png" alt="Scuba">
<h2 class="captioncolumn"><span>SCUBA</span></h2>
</a>
</div>
</div>
CSS code:
.fourcolumns { width: 100%; position: relative; margin: 40px 0;}
.productpic { width: 25%; float: left; display: inline-block; position: relative; margin: 0; padding: 0; background-color: #000000;}
.productpic a { }
.productpic img { width: 100%; opacity: 1;}
.productpic img:hover { opacity: 0.5;}
.productpic .captioncolumn { width: 80%; /*height: 50px;*/ background-color: #ffffff; position: absolute; top: 20px; left: 0; opacity: 1; padding: 5px 0 5px 20px;}
.productpic .captioncolumn span { font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 36px; position: relative; color: #2a286a; opacity: 1; }
.productpic .captioncolumn:hover { opacity: 0.5;}
Use this will help
.productpic img:hover .productpic .captioncolumn,.productpic img { opacity: 0.5;}
It all boils down to a link which ties everything together so that no matter which area of the box are hovered over, it's all activated, instead of one area, when hovered over, showing a hover effect and other areas not showing a hover effect. However, I don't want the text box to be affected in the hover effect. Therefore I looked around for answer for making only the child element activated inside the a parent link. Here's the answer:
.productpic a:hover img { opacity:0.5; }
You can also see the final result at http://codepen.io/kikibres/pen/MwJzqO?editors=110
Okay.As per your comment the suggestion is to use the way-
.productpic img:hover + h2{ background:transparent;}
.productpic img:hover {
opacity: 0.5;
}
link
Related
I'm currently working on my first site, and I have encountered a problem when trying to create two animations. The element when hovered, moves the text above the image (in this example "Krow Logo"),zooms at the image, and changes its opacity. Great so far.
The problem is, I want a small text to transition in during this animation as well, element h3. This, does not work in all the ways I've tried. I imaged it was a problem with inheritance so I tried to change the parent's properties specifically to its second child. No luck.
I want to preserve overflow:hidden on h2 (Krow Logo) but NOT on h3, since I want h3 to move OUTSIDE of the parent box.
Any hints are greatly appreciated!
I've fiddled around with :nth-child to try and change property overflow:hidden to visible
I've tried creating a grandparent element with position set to relative.
I've tried combinations of + ~ > combinators
None of them works.
CSS
#import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
figure.snip1104:first-child {
font-family: 'Raleway', Arial, sans-serif;
position: absolute;
left:20%;
overflow: hidden;
margin: 10px;
min-width: 220px;
max-width: 310px;
max-height: 220px;
width: 100%;
background: #000000;
color: #ffffff;
text-align: center;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
figure.snip1104 h2 {
position: absolute;
left: 40px;
right: 40px;
display: inline-block;
background: #000000;
-webkit-transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
transform: skew(-10deg) rotate(-10deg) translate(0, -50%);
padding: 12px 5px;
margin: 0;
top: 50%;
text-transform: uppercase;
font-weight: 400;
}
figure.snip1104:hover h2,
figure.snip1104.hover h2 {
-webkit-transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
transform: skew(-10deg) rotate(-10deg) translate(-150%, -50%);
}
figure.snip1104 h3 {
opacity:0;
z-index: 5;
position: absolute;
left: 40px;
right: 40px;
display: inline-block;
padding: 12px 5px;
margin: 0;
top: 110px;
overflow: visible;
}
figure.snip1104:hover h3,
figure.snip1104.hover h3{
opacity:1;
background-color:green;
transform: translateY(200%);
}
HTML
<figure class="snip1104 blue">
<img class="temp" src="/home/it21366/Desktop/liberty/tshirtblue.jpg" alt="sample33"/>
<figcaption>
<h2>Krow <span> Logo</span></h2>
<h3>tesssst</h3>
</figcaption>
</figure>
The effect I wish to occur is for tessst to overflow the parent snip and stay visible despite moving outside of its borders. Instead, h3 disappears (moves to location, but is hidden)
Alright I created an example to show how you might solve just the issue you were having (from my understanding of your question). Basically you create a container for your headings and your image and you control the headings/image based on the hover state of the container.
I have done away with everything not necessary to solving the problem of moving your elements around so you'll have to apply this to your own solution in a way that makes sense (e.g. play with sizing, display: none, whatever you want).
There are also ways to trigger this with JavaScript but I wanted to show a CSS only solution.
If you run the code snippet you should look at it full screen or else it looks bad because I am using view-port units for the page height. Or checkout the codepen and put the editor on the left or right to get more height for the display.
https://codepen.io/zenRyoku/pen/oRdYzB?editors=1100
#import url(https://fonts.googleapis.com/css?family=Raleway:400,800);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Raleway', Arial, sans-serif;
}
.page {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: slategray;
}
.main-heading,
.sub-heading {
padding: 2rem;
color: white;
background: rgba(0,0,0,.6);
transition: all 300ms;
text-align: center;
}
.main-heading {
transform: translateY(200%);
}
.sub-heading {
opacity: 0;
}
.container:hover .main-heading {
transform: translateY(0px);
}
.container:hover .sub-heading {
opacity: 1;
transform: translateY(-200%);
}
<div class="page">
<div class="container">
<h2 class="main-heading">Logo</h2>
<img src="https://source.unsplash.com/400x300/?japan,sign"/>
<h3 class="sub-heading">some other text</h3>
</div>
</div>
Not sure that I got what you're trying to achieve, but if overflow is hidden in the parent box, then any content you want to overflow outside of it will be hidden as that is the meaning of overflow: hidden.
If I may ask, what are you trying to target with this?
figure.snip1104:hover h2,
figure.snip1104.hover h2
I have a menu using ul/li items, and they have a background image.
All over the Internet, and in stackoverflow, there is information on how to hack background image opacity. For example: https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity
But not for my particular use case when using menus. It seems particularly tricky. From everything I have tried, one of the solutions in the aforementioned website seems to work the best.
But still, the image is not vertically aligned. I cannot seem to be able to center the image in the menu...
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {float: left;}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {background-color: #4CAF50;}
.my-container {
position: relative;
overflow: hidden;
}
.my-container a {
position: relative;
z-index: 2;
}
.my-container img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
opacity: 0.2;
}
<ul>
<li><div class="my-container">Aaaa <img src="http://www.joaobidu.com.br/jb/content/uploads/2012/03/cancer3.png"></img></div></li>
<li><div>Bbbb</div></li>
<li><div>Cccc</div></li>
<li><div>Dddd</div></li>
<li><div>Eeee</div></li>
</ul>
Hi,Please try this one.
If we will use top:-14px,It will affecting the modern browser like chrome and safari which is not accepting negative values.So we can use below format for background images.
.my-container {
background-image:url("http://www.joaobidu.com.br/jb/content/uploads/2012/03/cancer3.png");
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}
I am trying to show the caption on my products when you hover. I manage to get it, but the black won't show black, like I have some kind of white background on top of my effect. You can see it there
Here's the CSS I added
.product:hover .reveal img {
opacity: 1;
z-index: 1;
}
.reveal .hidden {
position: absolute;
z-index: -1;
top: 0;
width: 100%;
height: 100%;
margin-top: -20px;
}
.reveal:hover .hidden {
z-index: 1;
opacity: 1;
}
.reveal .caption {
position: absolute;
top: 0;
display: table;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 1);
color: rgba(0, 0, 0, 1) !important;
font: 12px/1.4em sans-serif;
text-transform: uppercase;
letter-spacing: 0.3em;
text-align: center;
}
.reveal .hidden .caption .centered {
display: table-cell;
vertical-align: middle;
}
Do you think it is as basic as a z-index problem, or is it more in the way I constructed it ?
That's because you have an hover effect the animate the .image-wrapper to opacity:0.5. If you set .product-grid .image-wrapper {opacity:1 !important) (just for the test you can see that the black is black.
So what can you do?
Do the fadeOut effect on the .reveal > img. In this way the .product-grid .image-wrapper will stay opacity:1.
try this
.reveal:hover .hidden {
z-index: 0;
opacity: 0.8;
}
One of the problems was the .caption was the same size as the image it was positioned over, and had a 1.0 alpha background- meaning the caption box covered the image entirely once the z-index let it pop in front.
The other problem is the js/jQ doing an animation on rollover. Just nix the code adding the hover handler to it. If you want a fade-in/out still, put the base z-index on your caption to make it naturally be in front, and animate its opacity up to 100% on :hover. This is opposed to animating the opacity of the whole tile from 100% to 50% and switching the stacking order.
.image-wrapper:hover {
opacity: 1 !important;
}
that will fix it. When you hover it goes to 0.5, this will stop it.
I created an anchor link with a background image. I also have a span tag that holds some text as well. My intended effect is to have the color of the span tag change when a user hovers over the entire image and not just the span tag (which is positioned in the middle of the background image).
Here's my HTML:
<a class="photos" href="link/to/folder">
<span>Event Photos</span>
</a>
And here is my SCSS:
.photos {display: block;
background: url('imgs/photos-bg.jpg') no-repeat center center;
background-size:cover;
height: auto;
padding-top: 11%;
padding-bottom: 14%;
#include transition(all .3s ease-in-out);
span {width: 20%;
margin: 0 auto;
background: $drkgrey;
text-align: center;
#include sansproxlgt(em(28));
color: $white;
padding:1% 1%;
display: block;
&:hover{color: $blue;}
}
}
I feel that I am close, but I am not sure where I am getting hung up.
a.photos:hover span {color: #color;}
In SASS:
&hover: {
span { color:$blue;}
}
For anyone who wants to know this was my final SCSS to get this to work.
Thanks to Jonline and Gray Spectrum for the insight!
a.photos {
display: block;
background: url('imgs/photos-bg.jpg') no-repeat center center;
background-size:cover;
height: auto;
padding: 14% 0;
span {
width: 20%;
margin: 0 auto;
background: $drkgrey;
text-align: center;
#include sansproxlgt(em(28));
color: $white;
padding:1% 1%;
display: block;
#include transition(all .3s ease-in-out);
#media screen and (max-width: 36.5em ) {
width: 30%;}
}
&:hover span {color: $blue;}
}
I have these two images with corresponding labels: http://jsfiddle.net/Fdjtc/
I want to make it so that when I hover over one of the divs, the image animated downward and the text (initially invisible) animated downward and fades to full opacity, making the images and labels look like they do right now. How can I make sure that the images have enough space upwards to do this, and can I do this kind of animationg using CSS3's transition?
Are you looking for something like this:
http://jsfiddle.net/Fdjtc/9/
There are several ways of doing this. This example is using absolute positioning with transitions on top/bottom.
CSS:
div.wrap > img {
display: block;
position: absolute;
width: 200px;
top: 20px;
left: 20px;
-webkit-transition: top 500ms;
}
div.wrap:hover > img {
top: 5px;
}
div.wrap > span {
display: block;
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-transition: bottom 500ms;
}
div.wrap:hover > span {
bottom: 2px;
opacity: 1;
}
Edit: (after your dynamic size request)
This is another way of doing it, using margins. Text caption is a bit of problem here but you will get the idea.
Updated Fiddle: http://jsfiddle.net/Fdjtc/11/
CSS:
div.wrap {
float: left;
text-align: center;
margin: 4px;
border: 1px solid gray;
}
div.wrap > img {
display: block;
text-align: center;
margin: 16px;
-webkit-transition: margin-top 500ms;
}
div.wrap:hover > img {
margin-top: 2px;
}
Based on what you wrote, I've came up with this for you:
http://jsfiddle.net/Fdjtc/6/
I've made quite a noticeable change to your html, too:
<div>
<img src="http://placekitten.com/256">
<span>Label 1</span>
</div>
Hopefully this is what you wanted, if not, please extend your question and be more descriptive.
Is this what you wanted to achieve ?
.box img
{
-webkit-transition:all 0.5s ease-in-out;
height:200px;
display:block;
margin-top:-200px;
}
.box:hover > img
{
margin-top:0px;
}
http://jsfiddle.net/4BtcR/