I am a very new web developer. I am currently coding a simple wordpress landing page and I wanted to add some functionality to darken and add text when the user hovers the mouse over said image. It truly should be something quite simple.
For an example that actually implements the same wordpress theme and does it right.
in the "about us" section of the page above, they have pictures that have the exact same functionality I need for hovering, yet I have no idea how they did this.
If you need any more clarification, please do not hesitate to ask, I am not sure if my lexicon is correct/clear at all.
DEMO
Just show the white background element with opacity and the content element when wrapper is mouse over. Note that you need to you need to separate the content from the background element so the background's opacity won't effect the content.
<div class="wrap">
<div class="content">This is the content</div>
<div class="bkg"></div>
</div>
.wrap {
background-image:url('http://www.online-image-editor.com/styles/2013/images/example_image.png');
width:475px;
height:365px;
position:relative;
}
.wrap:hover .bkg {
display:block;
}
.wrap:hover .content {
display:block;
}
.bkg {
background:#fff;
opacity:0.5;
position:absolute;
width:100%;
height:100%;
display:none;
z-index:1;
filter: alpha(opacity=50);
}
.content {
width:100%;
height:100%;
display:none;
z-index:3;
position:absolute;
}
This is a css transition on hover.
See a live demo here
Here is the setup html:
<div class="container">
<div class="bottom-layer"></div>
<div class="overlay">
<h2>Hi there!</h2>
</div>
</div>
The container has a positioned overlay that fades in over the bottom layer content.
Here's the driving css:
.container,
.bottom-layer,
.overlay {
height: 100px;
width: 200px;
}
.container {
position: relative;
}
.bottom-layer {
background-image: url(http://rndimg.com/ImageStore/OilPaintingBlue/200x100_OilPaintingBlue_ede2e8a97ced4beb86bde6752ae5cfab.jpg);
}
.overlay {
position: absolute;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(255,255,255, .1);
transition: opacity 0.6s;
}
.container:hover .overlay {
opacity: 1;
}
The two important parts are the positioning and the transition. The overlay has to be absolutely positioned to render over the element on the same level (its "sibling"). We set the opacity to 0, but set it to 1 when the parent is overlayer.
Then, we just tell it to run a transition whenever the opacity changes..
Related
I'm trying to replicate the menu design used by:
https://www.pandaexpress.com/menu/appetizers
I think I am at the point where I need to use javascript/jquery, but I'm very new and unsure of my next step. When the user hovers over an image the image seems to slide into focus and display information below. I have tried to isolate this into separate actions, modeled by the following jfiddles:
https://jsfiddle.net/Lrqu8L0q/3/ (enlarges and focuses image on hover)
https://jsfiddle.net/4ud7wnop/1/ (slides down to reveal text on hover)
I tried combining them but when I add the
<p>This text is displayed on a downward slide after hover</p>
to the first jfiddle the paragraph isn't hidden.
Now I'm having trouble trying to think of a way to combine the both. I think I need to use javascript/jquery to create a function that applies the slide down to reveal text after the image enlarge has been completed. I'm very new to web design as a whole and am especially shaky with javascript and jquery.
I was wondering if I could write a function that checks if the image has expanded on enlarge yet, and after it's reached a desired height/width run the text slide function. Really not sure how to do this.. could someone point me in the correct direction?
I merged them together here: https://jsfiddle.net/danbovey/53ya31gm/
The main problem was, you need the image to be larger to cover over any detail text you may have.
I have commented on most changes I added in the fiddle. But here's the key parts:
I renamed the bg element to tile, it seemed more appropriate. Instead of working with height for the .slide-down class, I created a transform on the details div when the tile is hovered.
.tile:hover .details {
transform: translateY(150%);
}
You can learn about CSS transforms here: http://css3.bradshawenterprises.com/transforms/
The percentage of the transform can be calculated as the height of img / height of details - 300px / 200px = 150%
To create the growing effect, a pseudo :before element adds a white area the same size of the image before the tile, and when hovered, grows to 25px around each edge. And an identical element is added to the details div.
.tile:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #FFF;
transition: all 0.4s ease;
content: '';
}
.tile:hover:before {
top: -25px;
left: -25px;
width: calc(100% + 50px);
height: calc(100% + 50px);
}
Is this what you want here?
https://jsfiddle.net/Lrqu8L0q/9/
.thumbnail{
width: 100px;
height: 100px;
display:block;
z-index:999;
cursor: pointer;
-webkit-transition-property: all;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
border-radius: 2px;
}
.bg:hover {
transform: scale(1.25)
}
.bg{
width: 150px;
height: 110px;
background-color: teal;
border-radius: 2px;
}
.slide-down {
border-radius: 3px;
height: 60px;
width: 150px;
position: relative;
transition: height 0.3s;
-webkit-transition: height 0.3s;
text-align: center;
overflow: hidden;
background-color: teal;
}
.bg:hover .slide-down {
height: 140px;
}
.container{
position: relative;
left: 150px;
top: 50px;
}
<div class="container">
<div class="bg">
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
<div class="slide-down">
<h2>Title</h2>
<p>This text is displayed after a downward slide on hover</p>
</div>
</div>
</div>
Basically what you need to do is put both your requirement into 1 combined object (in this I mean put both the Image & Text inside 1 container) like in the above example
<div class="bg">
<img src="https://static.pexels.com/photos/70497/pexels-photo-70497.jpeg" class="thumbnail"/>
<div class="slide-down">
<h2>Title</h2>
<p>This text is displayed after a downward slide on hover</p>
</div>
</div>
Both of them are put inside 1 container with class .bg, then what you want is to hover the container (not the thumbnail or description itself) and trigger both the scaling & slide-down the menu detail, you can do this by adding the CSS
.bg:hover { ... }
For the scaling, you need to put it together with the container so all the elements inside will be scaled to, then for the description inside it, you need to use
.bg:hover slide-down { ... }
This is where you set the animation that will expand the description of the menu (for explanation, this CSS will trigger on .bg hover, and applied to the element .slide-down inside of it)
How can I change my code to allow it to change image when I hover my mouse over the current image?
The image I wish to change sits in the body of my webpage:
<body>
<!-- Here's myImage!-->
<img src="myImage.jpg" alt="BM" style="width:141px;height:114px; position:absolute; top: 300px; left: 450px;">
and I would like this image for example, to change to a new image, anotherImage.jpgwhen you hover over myImage.jpg. I attempted to find help elsewhere but was unsuccessful.
You can use javascript's onmouseover event, but it's considered best to use CSS where possible.
Here is a demo of one possible solution: (Edit on Codepen)
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 600px;
height: 400px;
margin-left: 50px;
}
.container:hover img:nth-of-type(2) {
opacity: 1;
}
.container img {
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 400px;
transition: opacity 1s ease-in-out 0s;
}
.container img:nth-of-type(1) {
opacity: 1;
}
.container img:nth-of-type(2) {
opacity: 0;
}
<div class="container">
<img src="https://placeimg.com/600/400/animals" />
<img src="https://placeimg.com/600/400/people" />
</div>
Basically, the way in which this works is that the two images are made the same size through CSS, and placed on top of each other (that's what the absolute positioning is for). When the user is not hovering over it, the second image will have an opacity of 0 (the nth-of-type(2) selector selects the second element of that type), so it is not visible, and the first one has an opacity of 1, so it is visible. When the user hovers over it, the second one is given an opacity of 1, so it becomes fully visible, and since they are both the same size and on top of each other, the first one is covered by the second. This means that the image changes when you hover over it.
Another advantage to this is that, as you can see in the demo, it is fully animateable! Other solutions, such as using display: none or background images cannot be used with CSS transitions, as they are not animateable properties, but opacity is animatable, so you can create transitions such as this! Good luck!
If you didn't understand my explanation of how this works, feel free to ask for clarification!
If you can add both images into a <span> tag or so, you could do this:
span img:last-child {
display: none;
}
span:hover img:first-child {
display: none;
}
span:hover img:last-child {
display: inline-block;
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
<img src="http://lorempixel.com/300/150/sports/2">
</span>
Or, use a pseudo element for the second image.
span:hover img {
display: none;
}
span:hover:after {
content: url("http://lorempixel.com/300/150/sports/2");
}
<span>
<img src="http://lorempixel.com/300/150/sports/1">
</span>
See this jsFiddle for an example of some basic fade in/out effects.
In your CSS make the first class contain the first image. Then the second class will be the class name + hover. EX. .CLASSNAME:hover {}
#NAME {
background-image: url('LibraryTransparent.png');
height: 70px;
width: 120px;
}
#NAME:hover {
background-image: url('LibraryHoverTrans.png');
}
I have a banner. In that banner is an image. When you resize the viewport/browsers width the image is scaled to a smaller size to fit the window.
Notice how when you resize the browser, as the image gets smaller, it moves in an upward motion away from the bottom of the div.
I want the bottom of the image to stick to the bottom of the div always. Regardless of size.
Heres my JS FIDDLE
HTML
<div class="wrapper">
<center>
<div class="imgWrapper">
<img src="http://lorempixel.com/500/300/">
</div>
</center>
</div>
CSS
.wrapper {
background:#777;
width:100%;
height:400px;
display:block;
}
.imgWrapper {
width:100%;
max-width:500px;
display:inline-block;
margin-top:100px;
}
.imgWrapper img {
width:100%;
}
I want the bottom of the image to stick to the bottom of the div always. Regardless of size.
Add position: relative to the parent element and position: absolute; to the child element (along with bottom and left values).
DEMO
This will do it for you https://jsfiddle.net/eaxe2sww/4/
.wrapper {
position: relative;
background:#777;
width:100%;
height:400px;
display:block;
}
.imgWrapper {
width:100%;
max-width:500px;
position: absolute;
bottom: 0;
left: 50%;
transform:translateX(-50%);
}
The page I have got is like this: .
I wanted to make it centralized but I couldnot do that.
The problems are:
I want to give black div full page.
I want to centralize other two divs without using left property in css.
While hovering the value of z should increase by any value so that the whole div can come up.
I learned about margin: 0 auto o auto; property that it centralizes the element with respect to page.
I want to get the same for yellow and green divs using margin property w.r.t. black divs.
Can I get these results using CSS or i will have to use Javascript etc?
My html code is here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css"/>
</head>
<body>
<div class="first">
<center> The first link </center>
</div>
<div class="second">
<center> The second link </center>
</div>
<div class="third">
<center> The third link </center>
</div>
</body>
<html>
My css document is:-
.first
{
position: absolute;
width:500px;
color:#fff;
height:200px;
background-color:#000;
z-index: 0;
margin:0 auto 0 auto;
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
left:60px;
z-index: 1;
margin:50px auto 0 auto;
}
.third
{
position: absolute;
width:300px;
height: 200px;
left:100px;
background-color:yellow;
z-index: 2;
margin:100px auto 0 auto;
}
body div:first-child a:hover
{
font-size:30px;
color:yellow;
z-index:5;
}
body div +div a:hover
{
font-size:40px;
color:red;
z-index: 5;
}
body div+div+div a:hover
{
font-size:50px;
color:#fff;
z-index:5;
}
I apologize for my English.And hope you will get my problems.
I still believe that using left is the best way to solve your problem — not sure why OP wants to avoid it.
Here is the proof-of-concept fiddle: http://jsfiddle.net/teddyrised/YqDL5/
Instead, use the following trick: set their position from the left by 50% of the container's/parent's width. That's half correct. However, we also need to take into account the width of the element itself, which means we have to offset it backwards by half of its own width.
Use this:
.second, .third {
left: 50%;
transform: translateX(-50%);
}
There are also some changes you have to make to your HTML code:
I would suggest wrapping everything around a parent container that is relatively positioned, and instead of using margins to offset the second and third div from the top, use top instead.
Remove <center>. Delegate layout to CSS, and this HTML tag has been deprecated long time ago.
Here is the revised HTML:
<section>
<div class="first">The first link </div>
<div class="second"> The second link </div>
<div class="third"> The third link </div>
</section>
Also, I suggest setting the first div to relative positioning, so it will not cause the parent element's height to collapse. Otherwise, you will have to set an explicit height since absolute positioning takes elements out of the flow, and the parent will not take it into account when calculating its own dimensions.
section {
position: relative;
}
.first {
width:100%;
color:#fff;
height:200px;
background-color:#000;
}
.second, .third {
left: 50%;
transform: translateX(-50%);
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
top: 50px;
z-index: 1;
}
.third {
position: absolute;
width:300px;
height: 200px;
top: 100px;
background-color:yellow;
z-index: 2;
}
See fiddle at: http://jsfiddle.net/teddyrised/YqDL5/
I'm using cross slide script.
The problem is I can't move the div to the background: slideshow overlapping all other divs. Tried to change z-index: Set z-index 0 to background div, and z-index:2 to all other divs. Still no success. Is there anyway to apply slideshow to the background div?
My css strcture looks like that
<body>
<div id="bg">
"all stuff goes here"
</div
</body>
And css for #bg
#bg {
/* Stretch background */
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:0;
}
Set css to:
#bg {
/* Stretch background */
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
z-index:0;
}
#test {
position: relative;
background-color: red;
z-index:5;
width: 120px;
margin-top:5px;
}
and html to:
<body>
<div id="bg"></div>
<div id="test">"all stuff goes here"</div>
</body>
Also see my jsfiddle.
Take it to the background with z-index: -1
instead of making z-index:0 or -1 to your "bg" id, make all other content z-index to 99 or more than that. so your "bg" will be back of your slides.
Do you observe the (complex) rules for stacking contexts, positioning, and z-index correctly?
https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context