I want to set background image and it is not working.
I dont know what the problem is but it just not working please help me out.
html code is:
<div class="main">
<div class="header clearfix">
<div class="container">
<div class="left-header">
<div class="logo"></div>
<div class="fb-like" data-href="https://www.facebook.com/pages" data-layout="button_count" data-action="like" data-show-faces="true" data-share="false"></div>
</div>
</div>
</div>
My css is:
.logo{
background: url("img/logo.png") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 201px;
margin-left: 10px;
height: 76px;
margin-top: 19px;
transition:all .3s;
-webkit-transition:all .3s;
-moz-transition:all .3s;
-ms-transition:all .3s;
-o-transition:all .3s;
}
And my image size is 231*86px hope u will find the answer and post it
Just add http:// before the image locating in your webserver like this http://img/logo.png and it will start working.
Related
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Is there a CSS parent selector?
(33 answers)
Closed 1 year ago.
I'm trying to scale a div which contains a background image when an anchor link is hovered upon.
I have seen similar questions before, namely this one. The solution here however, isn't ideal for me as my hover effect triggers when the anchor link is hovered upon (therefore cannot use pointer-events).
Essentially, when someone hovers over .card__link, I want to scale .card__image.
How do I go about this?
.card__overflow {
overflow: hidden;
}
.card__image {
background-image: url("https://cdn.pixabay.com/photo/2017/05/01/13/01/vehicle-2275456_1280.jpg");
transition: all 0.5s ease;
height: 300px;
width: 300px;
background-size: cover;
background-repeat: no-repeat;
}
.card__link:hover {
color: orange;
text-decoration: underline;
}
.card__link:hover ~ .card__image {
transform: scale(1.2);
}
<div class="card">
<div class="card__overflow">
<div class="card__image"></div>
</div>
<div class="card__body">
<div class="card__action">
<a class="card__link" href="#">Learn more</a>
</div>
</div>
</div>
The actual code for hover should be like this in the css please check for the css changes that has been made it works like that.
.card__overflow {
overflow: hidden;
}
.card__image {
background-image: url("https://cdn.pixabay.com/photo/2017/05/01/13/01/vehicle-2275456_1280.jpg");
transition: all 0.5s ease;
height: 300px;
width: 300px;
background-size: cover;
background-repeat: no-repeat;
}
.card__link:hover {
color: orange;
text-decoration: underline;
}
.card__body:hover~.card__overflow {
transform: scale(1.2);
}
<div class="card">
<div class="card__body">
<div class="card__action">
<a class="card__link" href="#">Learn more</a>
</div>
</div>
<div class="card__overflow">
<div class="card__image"></div>
</div>
</div>
It can be easily done with JS.
const link = document.querySelector(".card__link");
const image = document.querySelector(".card__image");
link.addEventListener("mouseenter", () => {
image.classList.add("scale-up")
image.classList.remove("scale-down")
})
link.addEventListener("mouseleave", () => {
image.classList.remove("scale-up")
image.classList.add("scale-down")
})
.card__overflow {
overflow: hidden;
}
.card__image {
background-image: url("https://cdn.pixabay.com/photo/2017/05/01/13/01/vehicle-2275456_1280.jpg");
transition: all 0.5s ease;
height: 300px;
width: 300px;
background-size: cover;
background-repeat: no-repeat;
}
.card__link:hover {
color: orange;
text-decoration: underline;
}
.scale-up {
transform: scale(1.2);
}
.scale-down {
transform: scale(1);
}
<div class="card">
<div class="card__overflow">
<div class="card__image"></div>
</div>
<div class="card__body">
<div class="card__action">
<a class="card__link" href="#">Learn more</a>
</div>
</div>
</div>
I tried to build a website when you hover on the link the bg will change. Is there a way to trigger the hover effect of the link "a" after the page is loaded?
.bg {
background-image: url('https://images.unsplash.com/photo-1494249465471-5655b7878482?ixlib=rb-0.3.5&s=997116405ede44d63ddc54f16e2db8ce&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb');
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: ease-in-out 0.5s;
}
.a:hover~.bg {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Cyrillic_letter_A_-_uppercase_and_lowercase.svg/1200px-Cyrillic_letter_A_-_uppercase_and_lowercase.svg.png');
transition: ease-in-out 0.5s;
}
.b:hover~.bg {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/LetterB.svg/1200px-LetterB.svg.png');
transition: ease-in-out 0.5s;
}
.c:hover~.bg {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Letter_c.svg/1200px-Letter_c.svg.png');
transition: ease-in-out 0.5s;
}
.work>a:hover {
color: #d55d5d;
}
<div class="work">
<a class="a" href=""> a
</a>
<a class="b" href=""> b
</a>
<a class="c" href=""> c
</a>
<div class="bg"> </div>
</div>
Here is a solution using jQuery, which is a package that is built on top of JavaScript. The solution works by using a data attribute to dynamically set the background-image url for the element when an a tag is hovered over. When the you move your cursor away from the a tag, it will reset the background-image to the default address.
$(function() {
var defaultImageUrl = 'https://images.unsplash.com/photo-1494249465471-5655b7878482?ixlib=rb-0.3.5&s=997116405ede44d63ddc54f16e2db8ce&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb';
$('.bg').css('background-image', "url('" + defaultImageUrl + "')");
$('a').on('mouseenter', function() {
$('.bg').css('background-image', "url('" + $(this).data('image-url') + "')");
});
$('a').on('mouseleave', function() {
$('.bg').css('background-image', "url('" + defaultImageUrl + "')");
});
});
.bg {
/*background-image: url('https://images.unsplash.com/photo-1494249465471-5655b7878482?ixlib=rb-0.3.5&s=997116405ede44d63ddc54f16e2db8ce&dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb');*/
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: ease-in-out 0.5s;
}
.a:hover~.bg {
/*background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Cyrillic_letter_A_-_uppercase_and_lowercase.svg/1200px-Cyrillic_letter_A_-_uppercase_and_lowercase.svg.png');*/
transition: ease-in-out 0.5s;
}
.b:hover~.bg {
/*background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/LetterB.svg/1200px-LetterB.svg.png');*/
transition: ease-in-out 0.5s;
}
.c:hover~.bg {
/*background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Letter_c.svg/1200px-Letter_c.svg.png');*/
transition: ease-in-out 0.5s;
}
.work>a:hover {
color: #d55d5d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work">
<a class="a" href="" data-image-url="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/Cyrillic_letter_A_-_uppercase_and_lowercase.svg/1200px-Cyrillic_letter_A_-_uppercase_and_lowercase.svg.png"> a
</a>
<a class="b" href="" data-image-url="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1f/LetterB.svg/1200px-LetterB.svg.png"> b
</a>
<a class="c" href="" data-image-url="https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Letter_c.svg/1200px-Letter_c.svg.png"> c
</a>
<div class="bg"> </div>
</div>
When hover on the .calltoaction, the background image supposed to scale to 105%. How can I target by CSS? I'm using foundation.css for my html. A codepen has been created as well: http://codepen.io/rezasan/pen/dpyoYO
HTML:
<div id="tiles">
<div class="row">
<div class="medium-6 columns nopadleftright tile-img" style="background-image:url('http://placehold.it/300x300');"></div>
<div class="medium-6 columns nopadleftright text-center">
<div class="v-align">
<h1 class="preheader text-center">EXPERIENCES</h1>
<h1>A Magical Location</h1>
<p>Text</p>
<div class="calltoaction">ABOUT</div>
</div>
</div>
<div class="row">
<div class="medium-6 columns nopadleftright text-center">
<div class="v-align">
<h1 class="preheader text-center">EXPERIENCES</h1>
<h1>A Magical Location</h1>
<p>Text</p>
<div class="calltoaction">ABOUT</div>
</div>
</div>
<div class="medium-6 columns nopadleftright tile-img" style="background-image:url('http://placehold.it/300x300');"></div>
CSS:
#tiles .row .medium-6 {
width:45%;
float:left;
height: 185px;
background-color: #fff;
padding:0 10px;
}
#tiles .row .tile-img{
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
transition: background-size .3s ease-in-out;
-moz-transition: background-size .3s ease-in-out;
-ms-transition: background-size .3s ease-in-out;
-o-transition: background-size .3s ease-in-out;
-webkit-transition: background-size .3s ease-in-out;
}
#tiles .calltoaction a:hover + .tile-img {
background-size: 105%;
}
You can't do that by pure CSS, because it doesn't work that way (you can't target a parent in your case). However you could achieve this by a little jQuery function:
$('.calltoaction a').hover(function(){
$('.tile-img').css('background-size', '105%');
});
https://jsfiddle.net/wx38rz5L/2777/
Use background-size:105% on hover
#tiles .row .tile-img:hover {
background-size:105%;
}
I try to make 3 column responsive menu with images ,but when I change the #teams .teams width to percents ,div disappears. Any solutions, please!?
There is my code
#teams .team_select {
display: table;
margin: 0 auto 20px auto;
}
#teams #choose {
display: inline-block;
/*width: 32.4%;*/
width: calc(98% / 3);
}
#teams #choose:nth-child(1) {
margin-right: 1%;
}
#teams #choose:nth-child(2) {
margin-right: 1%;
}
#teams .teams {
display: table-cell;
background-size: cover;
background-position: center;
/*width: 360px;
height: 370px;*/
width: calc(98% / 3);
height: auto;
transition: background-image 1s ease-in-out;
-webkit-transition: background-image 1s ease-in-out;
-moz-transition: background-image 1s ease-in-out;
-o-transition: background-image 1s ease-in-out;
-pre-transition: background-image 1s ease-in-out;
}
#teams .back {
background-image: url("https://f4.bcbits.com/img/a3503173982_16.jpg");
}
<div class="team_select">
<div id="choose">
<a href="">
<div class="teams back"></div>
</a>
</div>
<div id="choose">
<a href="">
<div class="teams back"></div>
</a>
</div>
<div id="choose">
<a href="">
<div class="teams back"></div>
</a>
</div>
</div>
I made a JSFiddle too
I find the solution with this and made the short code ,but it works nice. Only problem is that ,with min-height he leave blank space after divs, and I dont know how to remove that.
HTML
<div id="teams">
<ul>
<li class="back"></li>
<li class="back"></li>
<li class="back"></li>
</ul>
</div>
CSS
#teams{
width:100%;
}
#teams ul{
overflow:auto;
}
#teams li{
list-style:none;
display:inline-block;
width: 31%;
min-height: 700px;
height: auto;
background-size: 100%;
background-repeat: no-repeat;
}
li.back{background-image:url("https://f4.bcbits.com/img/a3503173982_16.jpg");}
li.back:hover{background-image:url("https://designschool.canva.com/wp-content/uploads/sites/2/2015/10/How-To-Use-Blurred-Images-In-Your-Designs-To-Great-Effect_Thumbnail_01.png");}
There is new JSFiddle
Could someone tell me why the transition property doesn't seem to be working on the header tag on my website: http://www.hccoinc.com/about/
I have a sticky (fixed) menu that I shrink after scrolling a ways. Everything is working except the transition property on the menu - the height change should transition over 0.3s, but it's happening immediately.
Here's the html structure:
<header id="masthead" class="site-header" role="banner">
<div class="container">
<a class="site-branding" rel="home" title="HCCO, Inc. (WOSB)" href="http://www.hccoinc.com/">
<h1 class="site-title">
<h2 class="site-description">Piecing IT Together</h2>
</a>
<nav id="site-navigation" class="site-primary-navigation slide-left">
...
</nav>
</div>
</header>
Here's the relevant CSS:
.site-header {
position: fixed;
width: 100%;
}
.site-main {
margin-top: 107px;
}
header, header .site-title img {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
header.site-header.smaller {
height: 55px;
background: rgba(51, 153, 204, 0.93);
}
header.site-header.smaller .container {
padding: 0;
}
header.site-header.smaller .site-title img {
max-height: 54px;
}
Thanks.
I figured it out. I had to apply the background color the .container div for other reasons, then I applied the transition timing to .container height and it's working now.