I'm using the following CSS code on my linked images:
a img:hover {
filter: alpha(opacity=80);
-khtml-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
background: #f00;
}
The idea is that when a user hovers over an image, this will be slightly tinted with red. The browser though seems to ignore the "background: #f00;" property.
What am I doing wrong?
Thanks in advance
It won't work as you are having image, so you need to have an overlay element, probably a div
Demo
HTML
<div class="wrap">
<img src="http://images.google.co.in/intl/en_ALL/images/logos/images_logo_lg.gif" />
<div class="overlay"></div>
</div>
CSS
.wrap {
position: relative;
display: inline-block;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
}
.wrap:hover .overlay {
background: rgba(250, 0, 0, .1);
}
Note: You should have a positioned relative container, else your absolute positioned div will run out in the wild, moreover, you can remove display: inline-block; and provide respective height and width to the container element, see to it that it sticks to your image, alternatively you can also use transitions for smooth effect
For transition you need to modify the class like this
.overlay {
position: absolute;
width: 100%;
height: 100%;
background: transparent;
top: 0;
transition: background 1s;
-moz-transition: background 1s;
-webkit-transition: background 1s;
-o-transition: background 1s;
}
Demo Transition
Related
I have a parent div wrapped around a scaled child div. The child div starts off with transform:scale(0,0); & expands to transform:scale(1,1); when a button is clicked.
.content-wrapper {
display: inline-block;
background-color: #ddf;
padding: 10px;
clear: both;
}
.content {
padding: 10px;
background-color: #fff;
display: flex-block;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:transform 1s ease-out;
}
.content.open {
transform:scale(1,1);
}
However the parent div content-wrapper stays at the same size of the child div content - even when the child is "closed".
The desired behaviour is when the child div is closed the parent div shrinks to only wrap around the button.
JSFiddle of Example
Is it possible to wrap the parent div around the child div when it's "closed" in this example?
This will be a little challenging because the background color is attached to the content container. I would remove the background color from the main container, then make it a separate div positioned absolute
<div class="content">
...
<div class="content-bg"> //contains your background color
then manipulate that based on your click handler.
I've updated the JSFiddle http://jsfiddle.net/ztxa5kwu/90/
CSS for the new div:
.content-bg{
position: absolute;
background-color: #ddf;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
transition: all .5s ease;
transform-origin: bottom right;
}
Notice the transform-origin: bottom right; to scale the background towards your button. In the JSFiddle, I made the button take on a border the same color as the background, but you could easily edit the size of the new <div class="content-bg"></div> to fit around your button.
Hope that helps, and gets you in the right direction.
Try this:
.content {
background-color: #fff;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:transform 1s ease-out;
display: block;
padding: 0;
height: 0; width: 0;
}
.content.open {
padding: 10px;
height: auto; width: auto;
transform: scale(1,1);
}
Edit: Play with this:
.content {
padding: 0;
background-color: #fff;
display: block;
overflow: hidden;
transform-origin:top;
transition: transform 1s ease-out, max-width 0.5s ease-out 0.4s, max-height 1s ease-out;
transform: scale(0,0); max-width: 0; max-height: 0;
}
.content.open {
padding: 10px;
transition: transform 1s ease-out, max-width 1s ease-out, max-height 8s ease-out;
transform: scale(1, 1); max-width: 1920px; max-height: 1080px;
}
I found this comment on an older question:
This method only partially achieves the desired effect but doesn't
actually remove the space. The transformed box acts like a
relatively positioned element - the space is taken up no matter how it
is scaled. Check out this jsFiddle which takes your first one and
just adds some bogus text at the bottom. Note how the text below it
doesn't move up when the box height is scaled to zero. – animuson♦ Jul
29 '13 at 20:37
So with that in mind I used the max-height/ max-width hack to get something close to what I was after: http://jsfiddle.net/BaronGrivet/ztxa5kwu/176/
.content {
padding: 10px;
background-color: #fff;
display: flex-block;
overflow: hidden;
transform:scale(0,0);
transform-origin:top;
transition:all 1s ease-out;
max-width: 0;
max-height: 0;
}
.content.open {
transform:scale(1,1);
max-width: 500px;
max-height: 500px;
}
I am trying to get the title to stick to the bottom of the hover box, so that when the user hovers over the title, the hover box appears with the title on the bottom. It should close from the title upwards, so that the entire box is covered by the description, but the title remains on the bottom. How do I get the hover box to appear with the title not moving?
I attached my code below so that you can see what I am talking about. When you hover over the h1 pictureTitle, it goes towards the middle of the picture because of the transform effect. I want it to remain at the bottom, and have the black background close upwards from the title, so that the hover box seems like it is a part of the title.
.img__wrap {
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.picture {
width: 200px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.img__description {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
opacity: 0;
transition: opacity 0.2s;
visibility:hidden;
}
.img__wrap:hover .img__description {
opacity: 1;
background:black;
height:100%;
visibility:visible;
transition-delay: 0.5s;
}
.img__wrap:hover .picture {
-moz-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
}
.pictureTitle{
background:black;
height:50px;
width:200px;
position:relative;
bottom:70px;
text-decoration:none;
color:red;
}
<div class="img__wrap">
<a href="myHomePage.html" style="text-decoration:none;">
<img src="http://www.dogbreedplus.com/dog_names/images/puppy-dog-names.jpg" alt="hover box is supposed to encapsulate picture"
class="picture">
<p class="img__description">
This is where the hover box should pop up explaining the picture it should flow from title and cover the box.
</p>
<h1 class="pictureTitle">Title </h1>
</a>
</div>
1. Title stay bottom issue
The title is staying in the same position. It doesn't move. You need to move it together with the image resizing. As the image is resizing to cover the full img__wrap div, you should change the bottom value of the pictureTitle from 70px to 0px and also add a transition to it. And so, it will move together with the image and always position it self at the bottom of the image
So your question is a wrong. You have to move the title otherwise it will stay in the same position as initially set.
2. Expand black background from bottom to top
Here is another problem with your code. You want to transition visibility:hidden to visibility: visible . This is not possible because you cannot animate non numeric values like visibility:hidde/visible or display:none/block. You should just use opacity:0 and opacity:1 on hover.
Then position the img__description at the bottom ( bottom:0 without top:0 ) and add an initial height of 0px . Then at hover add height:100%
Let me know if you have other questions. Cheers! :D
.img__wrap {
position: relative;
height: 190px;
width: 200px;
overflow: hidden;
}
.picture {
width: 200px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.img__description {
position: absolute;
bottom: 0;
left: 0;
right: 0;
color: #fff;
opacity: 0;
transition: 0.2s;
margin: 0;
background: black;
height: 0;
}
.img__wrap:hover .img__description {
opacity: 1;
height: 100%;
transition-delay: 0.5s;
}
.img__wrap:hover .picture {
-moz-transform: scale(1.8);
-webkit-transform: scale(1.8);
transform: scale(1.8);
}
.pictureTitle {
background: black;
height: 50px;
width: 200px;
position: relative;
bottom: 70px;
text-decoration: none;
color: red;
transition: 0.5s;
}
.img__wrap:hover .pictureTitle {
bottom: 0;
}
<div class="img__wrap">
<a href="myHomePage.html" style="text-decoration:none;">
<img src="http://www.dogbreedplus.com/dog_names/images/puppy-dog-names.jpg" alt="hover box is supposed to encapsulate picture" class="picture">
<p class="img__description">
This is where the hover box should pop up explaining the picture it should flow from title and cover the box.
</p>
<h1 class="pictureTitle">Title </h1>
</a>
</div>
use picture of 200x200 if your want to use height or for now add height:200px to class .picture image will stretch but it will resolve your problem, so instead of this use a perfect image 200x200
How can I realize a smooth transition for my mobile menu?
The transform property is working, but I want it to happen slowly..
My Sass looks like this
.mobile-nav
display: none
position: relative
width: 100%
background: $white
padding: 30px 0 20px
transform: translateY(-100%)
#media (max-width: 775px)
.mobile-nav.is-o
display: block
transform: translateY(0%)
The main obstacle you're facing is that the display property is not animatable.
Like a light switch, display: none is off and display: block is on. There's no middle ground, no fade effects, no CSS transitions.
However, there are multiple other properties you can use for transitions. Among them:
height
opacity
z-index
background-color
Here's an example:
.mobile-nav-toggle {
font-size: 2em;
cursor: pointer;
}
.mobile-nav {
display: inline-block;
overflow: hidden;
width: 0;
height: 0;
opacity: 0;
transition: width 1s, height 1s, opacity 0s 1s, background-color 0s 2s;
}
.mobile-nav-toggle:hover + .mobile-nav {
width: 150px;
height: 150px;
opacity: 1;
background-color: lightgreen;
transition: 1s;
}
<div class="mobile-nav-toggle">☰</div>
<div class="mobile-nav">
<ul>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>
</div>
References:
Full list of animatable properties in CSS
Transitions on the display: property
I personally use opacity combined with visibility to achieve fade effect like I would like for whole element. Remember to manipulate z-index, so you "hidden" object won't be clickable when dissapeared.
I'm trying to get the 'previous' and 'next' arrows of this pure css slider to "fade in" into a teal blue when people hover over it with their mouse (or when they tap on the arrows in the mobile version) since the default dark grey arrows don't show up that well in some photos. I've already prepared the teal blue image file, so it's just a matter of getting the hover and fade in css animation to work.
Here is a webpage that has the css slider:
http://melodywai.com/sodium.html
And here is a snippet of the CSS stylesheet that relates to the arrows:
.carousel-wrapper { position: relative; }
.carousel-wrapper .carousel-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 25px 50px;
opacity: 0;
transition: all 0.5s ease-in-out;
height: 500px;
width: 750px;
margin-left: auto;
margin-right: auto;
}
.carousel-wrapper .carousel-item .arrow {
position: absolute;
top: 50%;
display: block;
width: 50px;
height: 50px;
background: url("../prev.png") no-repeat;
z-index:999;
}
.carousel-wrapper .carousel-item .arrow.arrow-prev { left: 0; }
.carousel-wrapper .carousel-item .arrow.arrow-next {
right: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
I'm looking for suggestions on which class to target, or if, for some reason, hovers really can't work on this slider.
Thanks!
try adding
.carousel-wrapper .carousel-item .arrow:hover{
//do something
}
you can target them this way.
a.arrow.arrow-prev:hover {
}
a.arrow.arrow-next:hover {
}
to achieve this you must design the teal blue arrows with photoshop and on hover change the background image of the arrow container, for example:
a.arrow.arrow-prev:hover {
transition: all 0.2s ease-in-out; // to give the "fade-in" effect
background-image: url("arrow-teal-prev.png"); // to change the arrow img
}
a.arrow.arrow-next:hover {
transition: all 0.2s ease-in-out; // to give the "fade-in" effect
background-image: url("arrow-teal-next.png"); // to change the arrow img
}
this is a simple solution and it will look good with the transition effect.
Tell me if this helps you or you need more suggestions
I am a complete newbie when it comes to HTML and CSS and just building my very first website. I want to create an image that, when hovered, displays text and fades the image to a lower opacity. I've got the fade all worked out, as well as the opacity change. My only issue is that the text, which is contained within the element I want to fade, also fades and I would like to keep it at 100% opacity. I have tried setting opacity to 1 for the text but it does not override the opacity change of its container. For example, I have:
<div class="textbox">
<p class="boxtext">This is the text that will eventually go inside the box. It is blah lljsd iofu isduf iou eiosu dfi eiou sdiofu ioe soidfu oidu foiu foisu doiu eoiusodidfu oei osidfuosdiu ieu oisduf oiueoisu dfoi oiu soifu iod fioeo dfs.</p>
</div>
And also
div.textbox {
background-color: white;
margin-left: 2.5vw;
border: 2px solid lightgray;
width: 15vw;
height: 600px;
float: left;
}
div.textbox:hover {
background-color: lightgray;
border: 2px solid lightgray;
opacity: 0.5;
}
p.boxtext {
margin: 5% 5%;
}
This creates the hover that I want, but I can't keep the text opacity at 100%.
Edit: Thank you for providing the rgba() solution, this solves the problem. I have another case of the same problem except that there is a background image instead of a solid background color. Is there a similar workaround?
Edit2: Issues with fade breaking after replacing opacity change with a separate transparent .png.
a#imglink1 {
background-image: url('https://www.profilesinhistory.com/wp-content/uploads/2012/11/Apollo-11-NASA-Photograph-Signed-Neil-Armstrong-Michael-Collins-Buzz-Aldrin-200x200.jpg');
width: 200px;
height: 200px;
float: left;
-o-transition: 0.5s;
-ms-transition: 0.5s;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}
a#imglink1:hover {
background-image: url('../images/apollo_transparent.png');
-o-transition: 1s;
-ms-transition: 1s;
-moz-transition: 1s;
-webkit-transition: 1s;
transition: 1s;
}
a#imglink1:hover p {
visibility: visible;
}
Since you're using a solid background color you can use rgba to only change the opacity of the background/borders and not affect the content inside. In your example:
div.textbox:hover {
background-color: rgba(222,222,222,.5);
border: 2px solid rgba(222,222,222,.5);
}
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba()
For images you can accomplish a fade using :before and :after and fading the opacity of those elements:
a#imglink2 {
width: 200px;
height: 200px;
float: left;
position: relative;
}
a#imglink2 p
{
position: relative;
z-index:2;
}
a#imglink2:before
{
background-image: url('http://images2.layoutsparks.com/1/239061/welcome-orange-vintage-design.gif');
width: 200px;
height: 200px;
position: absolute;
top:0; left:0;
content:'';
z-index:1;
opacity:1;
transition: .3s opacity linear;
}
a#imglink2:after
{
background-image: url('http://images.all-free-download.com/images/graphicmedium/vintage_christmas_background_32295.jpg');
width: 200px;
height: 200px;
position: absolute;
top:0; left:0;
content:'';
z-index:1;
opacity:0;
transition: .3s opacity linear;
}
a#imglink2:hover:before
{
opacity:0;
}
a#imglink2:hover:after
{
opacity:1;
}
http://codepen.io/seraphzz/pen/ikJqB