I am trying to get this effect at my site. example:https://rno1.com/
(scroll down to "we specialize in")
I am very new to HTML and CSS also I am working on WordPress which make it a little bit harder.
started to code with this question here at StackOverflow:
Change body background image on hover with pure html/css
but I wanted to add a transition between the swapping images, also where do I need to change the font attributes?
div.link>a {
displya: inline-block !important;
position: relative !important;
z-index: 100;
}
.bg1:hover+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg2:hover+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.background {
background: transparent;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
<div class=container>
<div class="link">
bg1
<div class=background></div>
bg2
<div class=background>
</div>
</div>
</div>
You can add some opacity transition like below:
div.link>a {
display: inline-block;
position: relative;
z-index: 100;
}
.bg1+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg1:hover +.background {
opacity:1;
}
.bg2+.background {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.bg2:hover +.background {
opacity:1;
}
.background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition:1s all;
opacity:0;
}
<div class=container>
<div class="link">
bg1
<div class=background></div>
bg2
<div class=background>
</div>
</div>
</div>
You can also optimize your code like below:
div.link>a {
display: inline-block;
}
.bg1:before {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/divorce-min.jpg);
}
.bg1:hover:before {
opacity:1;
}
.bg2:before {
background: url(https://aviel-albo.com/wp-content/uploads/2019/04/Fotolia_37279445_Subscription_Monthly_M-min.jpg);
}
.bg2:hover:before {
opacity:1;
}
.bg:before {
content:"";
position: fixed;
z-index:-1;
width: 100%;
height: 100%;
top: 0;
left: 0;
transition:1s all;
opacity:0;
}
<div class=container>
<div class="link">
bg1
bg2
</div>
</div>
Related
I want to change the background image of the container such that when I hover on a link in the div, the background image changes.
Reading in stackoverflow and other sources, this should work, but I have tested in both Chrome and Edge. Neither is working at the moment.
#container {
width: 50%;
height: 300px;
position: relative;
}
#text {
position: absolute;
font-size: 3em;
z-index: 5;
}
#text:hover~#background {
background-image: url("http://lorempixel.com/400/200/food/");
}
#background {
width: 100%;
background-image: url("http://lorempixel.com/400/200/animal/");
background-position: center;
background-size: cover;
height: 100%;
opacity: 0.5;
position: absolute;
}
<div id="container">
<div id="background"></div>
<div id="text">Google</div>
</div>
If you are able to change your HTML, swap the background and text elements.
Then hovering on the text element can pick up its sibling element which is the background as it comes after it in the flow:
#container {
width: 50%;
height: 300px;
position: relative;
}
#text {
position: absolute;
font-size: 3em;
z-index: 5;
}
#text:hover~#background {
background-image: url("https://picsum.photos/id/1015/300/300");
}
#background {
width: 100%;
background-image: url("https://picsum.photos/id/1016/300/300");
background-position: center;
background-size: cover;
height: 100%;
opacity: 0.5;
position: absolute;
}
<div id="container">
<div id="text">Google</div>
<div id="background"></div>
</div>
But an alternative way could be to put your background images onto a pseudo element and cut out the need for a div background which isn't really needed to be a 'proper' element as it is just decoration.
#background {
background-image: url("http://lorempixel.com/400/200/sports/");
height:200px;
}
#container:hover > div:not(:hover){
background-image: url("http://lorempixel.com/400/200/food/");
}
#text{height:0;}
<div id="container">
<div id="background">abc</div>
<div id="text">Google</div>
</div>
Thank you all.
Here is what I finally did:
#containerGen {
width: 100%;
height: 200px;
position: relative;
}
#one {
position: absolute;
z-index: 5;
}
#alive {
position: absolute;
z-index: 5;
top: 9em;
}
#alight {
position: absolute;
z-index: 5;
top: 9em;
left: 3em;
}
#and {
position: absolute;
z-index: 5;
top: 9em;
left: 6.25em;
}
#alone {
position: absolute;
z-index: 5;
top: 9em;
left: 8em;
}
#follow {
position: absolute;
z-index: 4;
top: 9em;
}
#alive:hover~#background {
background-image: url("http://lorempixel.com/400/200/food/");
}
#alight:hover~#background {
background-image: url("http://lorempixel.com/400/200/city/");
}
#alone:hover~#background {
background-image: url("http://lorempixel.com/400/200/nature/");
}
#background {
width: 100%;
background-image: url("http://lorempixel.com/400/200/sports/1/");
background-position: center;
background-size: cover;
height: 500px;
opacity: 0.5;
position: absolute;
z-index: 0;
}
<div id="containerGen">
<div id="one">
<p>
M. "Em" Savage has awoken to find herself in what can only be called a stone sarcophagus. Woken up with no memory of who she is (save for the name on her "tomb") she must free the others trapped with them, discover not only who, but where they are, and
lead their way out of whatever has them trapped in the dark.
</p>
</div>
<div id="alive"><a class="bold wavyLine" href="https://scottsigler.com/book/alive/">Alive,</a> </div>
<div id="alight"><a class="bold wavyLine" href="https://scottsigler.com/book/alight/">Alight,</a> </div>
<div id="and">and</div>
<div id="alone"><a class="bold wavyLine" href="https://scottsigler.com/book/alone/">Alone</a> </div>
<div id="follow">
<span style="margin-left:10.75em;">follow</span> the "birthday children" as they discover who they are, where they came from, and the malevolent purpose for why they are there!
<p>The author of this page makes a guest appearance as a gunner during a battle in "Alone." It is unknown at this point if I survived.</p>
</div>
<div id="background"></div>
</div>
Slick Carousel (Next/Prev Button Placement)
<div class="container">
<div id="carousel" class="carousel">
<div class="item red"></div>
<div class="item orange"></div>
<div class="item green"></div>
<div class="item blue"></div>
</div>
</div>
$('#carousel').slick({
arrows: true,
slidesToShow: 3
});
Link
Everything is working fine , but i wanted to ask is that how do i make the Next Previous button are placed in the box instead of outside (see example below)
What I wanted:
The Button is on the image (like the example below) - DONE + a button with opacity when user hover
Example :
you should add first this style
First-Step
.slick-prev, .slick-next {
top: auto;
bottom: 25px;
right: 35px;
z-index: 10;
}
Second-Step
.slick-prev {
left: 30px;
}
Third-Step
.slick-next {
right: 30px;
}
Everybody else already gave you the right answer, but since there seems to be something wrong with JS Fiddle right now, I'll throw the code in a snippet for you.
Also, due to the way these snippets include the CSS, the Slick styles were overwriting the ones added here. So I had to make them !important.
$('#carousel').slick({
arrows: true,
slidesToShow: 3
});
.slick-prev::before, .slick-next::before { color: black; }
.container {
width: 600px;
margin-left: 20px;
}
.carousel {
width: 100%;
border: 1px solid black;
}
.item, .content { height: 200px !important; }
.red { background: red; }
.orange { background: orange; }
.green { background: green; }
.blue { background: blue; }
.carousel-2 .item { margin-right: 15px; }
.carousel-3 .item .content { margin-right: 15px; }
/* Not CSS for carousel, but CSS to get the look I want Slick to manage automatically for me. */
.carousel-4 .item {
float: left;
margin-right: 15px;
width: 180px;
}
.carousel-4 .item:nth-child(3) { margin-right: 0; }
.slick-prev, .slick-next {
top: auto !important;
bottom: 0 !important;
z-index: 10 !important;
opacity: 0.5 !important;
}
.slick-next {
right: 0 !important;
}
.slick-prev {
left: 0 !important;
}
.slick-prev:hover, .slick-next:hover {
opacity: 1 !important;
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.6/slick.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
<!-- Standard carousel where Slick calculated the best widths to fit. -->
<div class="container">
<div id="carousel" class="carousel">
<div class="item red"></div>
<div class="item orange"></div>
<div class="item green"></div>
<div class="item blue"></div>
</div>
</div>
Looking at your sketch, add the following CSS classes:
.slick-prev {
left: 10px;
top: 180px;
z-index: 1000;
}
.slick-next {
right: 10px;
top: 180px;
z-index: 1000;
}
For the opacity on hover add:
.slick-prev:hover, .slick-next:hover {
opacity: 0.5;
}
.container .slick-arrow {
top: auto;
bottom: 0;
z-index: 100;
opacity: 0;
}
.container .slick-arrow:hover {
opacity: 1;
}
.container .slick-prev {
left: 0;
}
.container .slick-next {
right: 0;
}
Add the following to your css. You can change the 0 for bottom, right and left to whatever offset you'd like.
.slick-prev, .slick-next {
top:auto;
bottom: 0;
z-index: 10;
}
.slick-next {
right: 0;
}
.slick-prev {
left: 0;
}
.slick-prev:hover, .slick-next:hover {
opacity:0.5;
}
If you want to remove the extra space where the buttons used to be then change .container to the this:
.container { width: 570px; }
Fiddle
adding below styling to css will move arrows to location in your image.
/* to align arrow at bottom */
.slick-prev{
left: 10px;
z-index: 1;
top: 100%;
transform: translateY(-100%);
}
.slick-next{
right: 10px;
z-index: 1;
top: 100%;
transform: translateY(-100%);
}
if you want arrow to be opaced by default and visible on hover add below style.
/* to add opacity on default and remove it on hover */
.slick-prev,
.slick-next{
opacity: 0.5;
}
.slick-prev:hover,
.slick-next:hover{
opacity: 1;
}
basically all i want to do is: Have a picture and when someone hovers over it i want some text to appear in its position(in the middle to be exact). What I have done so far is make the picture disappear on hover but i cannot get the text to be appeared..
Html:
<div class="container">
<img id="atp "class="atp" src="atp.jpg">
<div class="center">Some text</div>
</div>
Css:
atp{
display:block;
margin-left:auto;
margin-right:auto;
width:27%;
height:50%;}
container{
position: relative;
text-align: center;
}
.center{
position: absolute;
top:50%;
left:50%;
opacity: 0;
}
So basically, what i seek to be done is .atp:hover{opacity:0;} and what I also want is on atp's hover the .center{opacity:1;] So is there a way to put the opacity of center's to 1 when I am in the atp:hover{} code block?
Hope everything looks fine, thanks in advance!
Here is the code. Hope it will help you. if any changes please let me know.
/********* Simple or original overlay *******/
/* Main container */
.overlay-image {
position: relative;
width: 100%;
}
/* Original image */
.overlay-image .image {
display: block;
width: 100%;
height: auto;
}
/* Original text overlay */
.overlay-image .text {
color: #fff;
font-size: 30px;
line-height: 1.5em;
text-shadow: 2px 2px 2px #000;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
/********* Overlay on hover *******/
/* New overlay on hover */
.overlay-image .hover {
position: absolute;
top: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
}
/* New overlay appearance on hover */
.overlay-image:hover .hover {
opacity: 1;
}
/********* Background and text only overlay on hover *******/
.overlay-image .normal {
transition: .5s ease;
}
.overlay-image:hover .normal {
opacity: 0;
}
.overlay-image .hover {
background-color: rgba(0,0,0,0.5);
}
<div class="overlay-image">
<a href="LINK_URL">
<div class="normal">
<div class="text">Image + text ORIGINAL</div>
</div>
<div class="hover">
<img class="image" src="https://dummyimage.com/200x150/00ccff/fff.png" alt="Alt text hover" />
</div>
</a>
</div>
#atp {
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
width: 27%;
height: 50%;
z-index: 50;
}
.container {
position: relative;
text-align: center;
}
.center {
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
}
#atp:hover {
opacity: 0;
}
try this, using z-index. It worked with me :)
Ive got a product page with a smaller image of the product.
Now I want to show a bigger version of this image with a colored background covering the whole page, while I hover the smaller image.
The problem is, that the bigger image flickers while I move the mouse around.
My CSS:
#zoomed-product-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(162, 130, 192, 0.8);
z-index: 0;
visibility: hidden;
}
#zoomed-product-img img {
display: block;
margin: auto auto;
}
.productsdetail-image:hover~#zoomed-product-img {
visibility: visible;
}
My HTML:
<div class="productdetails">
<div class="productsdetail-image">
<img src="/assets/images/products/{{page.name}}.png" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
<div id="zoomed-product-img">
<img src="/assets/images/products/{{page.name}}.png" alt="Produktbild">
</div>
Can you help me? Maybe my way of thinking is wrong.
I think it flickers because when I show the bigger image, it is above (z index) the small one and I am not hovering the image anymore so it disappears.
I would also love to solve this with javascript, if you can give me any advice.
You need to specify dimensions for the container of the image. This is why it is flickering. I also used display: none; and display:block to hide and show the images.
.productdetails {
position: relative;
}
#zoomed-product-img {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
}
/* This is the product detail image styles */
.productsdetail-image {
display: block;
height: 200px;
width: 200px;
}
.productsdetail-image:hover img {
display: none;
}
.productsdetail-image:hover + #zoomed-product-img {
display: block;
}
HTML
<div class="productdetails">
<div class="productsdetail-image">
<img src="https://placeimg.com/200/200/animals" alt="Produktbild">
</div>
<div id="zoomed-product-img">
<img src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
Demo:
http://jsfiddle.net/n07bt46y/
Please check this in full page
$(document).ready(function(){
$('.productsdetail-image img').hover(function() {
$(this).hide();
$('#zoomed-product-img ').show(500);
});
$('#zoomed-product-img .close').click(function(){
$(this).parent().hide();
$('.productsdetail-image img ').show();
});
});
.productsdetail-image img {
width: 150px;
height: auto;
transition: all 0.5s ease;
}
#zoomed-product-img {
display: none;
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
#zoomed-product-img span.close {
position: absolute;
color: #fff;
cursor: pointer;
top: 20px;
right: 20px;
}
#zoomed-product-img img {
position: absolute;
width: 300px;
height: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: aUto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="productdetails">
<div class="productsdetail-image">
<img src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div id="zoomed-product-img">
<span class="close">close</span>
<img class="zoom-img" src="https://placeimg.com/300/300/animals" alt="Produktbild">
</div>
<div class="productsdetail-info">
</div>
Are you wanna build something like that? Hoppefully that fiddle can help you
I have a div which has an background image set. There is some text in this div as well.
I want to have full opacity all the time. On mouse over the background image must change from 0.5 to 1 opacity.
#cover {
background: url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
width: 100%;
height: 100%;
filter: alpha(opacity=40);
opacity: 0.5;
}
#cover:hover {
opacity: 1;
}
<div class="col-12" id="cover">
<h2>ABC</h2>
<p>WELCOME USER</p>
</div>
Use a div inside a div to serve the background:
http://jsfiddle.net/0mgrt069/9/ (just fixed a typo)
<div class="col-12">
<div class="background"></div>
<h2>ABC</h2><p>WELCOME USER</p>
</div>
And CSS:
.background{
background:url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: .4;
width: 300px;
height: 200px;
}
.background:hover{
opacity:1;
}
Rather than adding an extra element, why don't you think of using pseudo elements? you could then 'alter' the background opacity on the hover:
Something like:
#cover:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
opacity: 0.5;
z-index:-2;
}
whilst making your #cover have a position: relative.
Live Demo
#cover {
position: relative;
background: width: 100%;
height: 100%;
}
#cover:hover:after {
opacity:1;
}
#cover:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
background: url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
opacity: 0.5;
z-index:-2;
}
<div class="col-12" id="cover">
<h2>ABC</h2>
<p>WELCOME USER</p>
</div>
Try this fiddle. Set the opacity of text to original opacity of image or as per your requirement of opacity value for text.
http://jsfiddle.net/pradyumnaswain/Lpmkq6of/
#cover {
background: url(http://animalscamp.com/wp-content/uploads/2011/12/Grizzly-Bear-3.jpg);
width: 100%;
height: 100%;
filter: alpha(opacity=40);
opacity: 0.5;
}
#cover:hover {
opacity: 1;
}
h2 {
opacity: 0.5
}
p {
opacity: 0.5
}
<div class="col-12" id="cover">
<h2>ABC</h2>
<p>WELCOME USER</p>
</div>