I am trying to show test.png in the background, but it doesn't show up.
Below is what I tried:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="menubalkje"></div>
<div class="menu"></div>
<div class="content">
test
</div>
<img class="bgafb" src="images/test.png">
</body>
</html>
CSS:
body {
padding:0px;
margin: 0 auto;
}
.menubalkje{
background-color:#b32b00;
margin-left:auto;
margin-right:auto;
width:1200px;
height:25px;
}
.menu{
background-color:E53700;
margin-left:auto;
margin-right:auto;
width:1200px;
height:75px;
}
.content{
background-color:#ff3e01;
width:1200px;
height:100%;
margin-left:auto;
margin-right:auto;
}
.bgafb{
position:fixed;
left:-270px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
The img element with id bgafb needs to show the background image, but doesn't.
The image shows for me (I tried with a http url, as I don't have your database)
http://jsfiddle.net/z8dw4Lfz/
<img class="bgafb" src="http://img0.chromatic.io/d8fb8ca6-3b46-d763-9dbf-fd8388402d1d/small.jpg">
probabily you are giving left:-270px; in .bgafb class which is disapearing the image from the screen. if you will set it to left:0px; then image will show in body
Add background property with comma separated values in your CSS like:
#divId {
background:url(images/image1.png) repeat-x, url(images/image2.png) repeat;
}
Hope This Help.
Got Help from HERE:
If you want to use something as a background image, put it in the body of your CSS.
body {
background-image: url('path_to_image');
}
Related
Got an image filter on hover and there is an absolute div on top of it, which cancels the hover effect of underlying image when hover. I need the image filter stay even when .absolute is hover
simplified html
<div class="parent">
<div class="absoulte"><p>Hover bttn</p></div>
<img src="blabla.jpg">
</div>
and the css
.parent img:hover{
filter: brightness(0.5) saturate(0.4) hue-rotate(190deg);
}
.absoulte {
width:100%;
position:absolute;
text-align:center;
opacity:0;
z-index:9
bottom:100px;
}
.parent:hover .vieitembtn {opacity:1;}
I suspect the problem is bad syntax.
You need a value for text-align (or remove it altogether) and closing semicolons on all properties.
Fixed CSS:
.parent img:hover{
filter: brightness(0.5) saturate(0.4) hue-rotate(190deg);
}
.absoulte {
width:100%;
text-align:center;
center;opacity:0;
z-index:9;
bottom:100px;
}
.parent:hover .vieitembtn {opacity:1;}
I think you just need to add -webkit-filter: instead of just filter I made a jsfiddle for you you dont really need all of that other stuff though I am not sure what you are trying to do though...
http://jsfiddle.net/322kxppm/
<div class="parent">
<p>Hover button</p>
<img src="http://www.clickerzoneuk.co.uk/cz/wp-content/uploads/2010/10/PuppySmall.jpg"/>
.parent{
text-align: center;
}
img:hover{
-webkit-filter: brightness(.5) saturate(.4) hue-rotate(190deg);
}
I like pretty much the slow auto zoom in and out effect on that site : http://watchingtheworldcup.com/ for banner images such as the very top one.
I tired to replicate it, by looking at developer tools wihtin browser, but have some trouble implementing it as in developper tool some mentions are stroked etc.
here is my html :
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="#">
<article class="article_container">
<img class="article_image_hompage5" src="#">
<h2 class="article_title_hompage3"> a favourite thai soup</h2>
</article>
</a>
</div>
</div>
and my css for the image :
.article_image_hompage5{
width: 100%;
border-radius: 2px 2px 2px 2px;
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
margin-top:15px;
z-index:0;
}
Can someone help with with finding the right css settings ?
cheers,
Use css animation you can get the similar result.
/* Chrome, Safari, Opera */
#-webkit-keyframes zoom {
from {
-webkit-transform: scale(1,1);
}
to {
-webkit-transform: scale(1.5,1.5);
}
}
/* Standard syntax */
#keyframes zoom {
from {
transform: scale(1,1);
}
to {
transform: scale(1.5,1.5);
}
}
img {
-webkit-animation: zoom 50s; /* Chrome, Safari, Opera */
animation: zoom 50s;
}
<img alt="" src="http://watchingtheworldcup.com/photos/worldcup1.jpg" />
If you want to also zoom out you need to define the the milestones in your keyframes as such:
#-webkit-keyframes zoominout {
0% {
-webkit-transform: scale(1,1);
}
50% {
-webkit-transform: scale(1.5,1.5);
}
100% {
-webkit-transform: scale(1.1,1.1);
}
}
Use css transform:scale();
like:
JavaScript:
window.onload=function(){
$("#content").fadeOut(4000);
$("#background").addClass("zoom");
setTimeout(function(){
$("#background").removeClass("zoom");
},5000);
}
body{
margin:0px;
padding:0px;
width:100%;
height:100%;
}
#background{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background:url("http://watchingtheworldcup.com/photos/worldcup1.jpg") center center no-repeat;
background-size: 100% 100%;
display:inline-block;
z-index:2;
transition:all ease 4.1s;
/* transform:scale(1,1);*/
}
#content{
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
z-index:3;
background-color:rgba(0,0,0,0.5);
color:#ffffff;
font-size:50px;
}
.zoom{
transform:scale(1.2,1.2);
}
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div id="background">
</div>
<div id="content">
<center><br /><br /><br /><br /><br /><br />
Watching...
</center>
</div>
I want to align the bars to the bottom here: http://jsfiddle.net/7vdLV/67/
I tried using the following trick:
.graph { position: relative; }
.weekbar { position: absolute; bottom: 0; left: 0; }
However it breaks the graph, can anyone tell me how I should do it please in this scenario?
Tweaked the HTML a bit as well as the CSS and got this: http://jsfiddle.net/7vdLV/74/
<div class="graph">
<div class="weekbar"><div style="height: 10%;"></div></div>
<div class="weekbar"><div style="height: 20%;"></div></div>
<div class="weekbar"><div style="height: 30%;"></div></div>
<div class="weekbar"><div style="height: 40%;"></div></div>
</div>
As TylerH pointed out inline styles are considered bad practice so you would be better replacing them with classes i.e.
<div class="graph">
<div class="weekbar"><div class="h10"></div></div>
<div class="weekbar"><div class="h20"></div></div>
<div class="weekbar"><div class="h30"></div></div>
<div class="weekbar"><div class="h40"></div></div>
</div>
.h10 {
height: 10%;
}
Try transform:
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipV;
-ms-filter: "FlipV";
http://jsfiddle.net/L4A2h/1/
Just replace the .graph class with the following code
.graph {
width: 100%;
height: 200px;
background-color: #eaeaea;
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
Hope this Helps
Simplest solution:
apply
.weekbar{
position:relative;
display:inline-block;
top:50%; // height of biggest bar
}
Check this JSFiddle
Or if ancient browser support is not a big deal you can make use of the ::before element as follows:
.graph::before{
content:"";
display:block;
height:50%; // height of the biggest bar
}
.weekbar{
display:inline-block;
}
check this JSFiddle
Make these edits to your CSS:
.graph { position:relative; }
.weekbar { position: relative; top: 100%; left: 0; }
Is this what you were looking to do?
http://jsfiddle.net/4HEEk/
You can use position:relative; for the parent and position:relative; also for the child and calculate the top value by this jQuery code:
$(document).ready(function() {
var parentHeight = $('.graph').height();
$('.weekbar').each(function() {
var height = parentHeight - $(this).height();
$(this).css('top',height*100/parentHeight + '%');
});
});
Here is a working fiddle
I would change float for display:inline-block; then set an "invisible" resetter div at the start of your graph to make sure all the elements start from the bottom (rather from the bottom of the tallest line.
.weekbar {
width: 3.1%;
margin-left: -4px;
margin-right: 2%;
display:inline-block;
background-color: #aeaeae;
}
.resetter{
height:100%;
display:inline-block;
width:0;
margin-right:-4px;
}
Have a look at this JSFiddle.
Also on a note about inline style usage (dont do it!). If you know that you have a discrete number of heights (ie. in your example they are all multiples of 10) i would suggest creating classes for them.
When I apply transition in Chrome(24.0.1312.57) on hover it does not update background-color on mouse out. See this fiddle: http://jsfiddle.net/WKVJ9/
Here is the code:
.transition{
-webkit-transition: all 500ms ease-in-out;
}
.wrapper{
width:200px;
height:200px;
display:block;
background-color:cyan;
position:relative;
}
.hoverme{
border-radius:90px;
display: block;
width:50px;
height:50px;
top:50px;
right:-90px;
position:absolute;
-webkit-transform: rotate(-45deg);
}
.wrapper:hover .hoverme{
-webkit-transform: rotate(0deg);
right:0;
}
.hoverme:hover{
background-color:red;
}
and html:
<div class="wrapper">
<div class="hoverme transition">
Hover me
</div>
</div>
If you hover .wrapper and .hoverme and then quickly move mouse away from this box the .hoverme element will only animate rotation and position.
On the site I am working on it does not even refresh hover state so when the animation is finished and the background stays with :hover background-color... Which for some reason I cannot reproduce here
Is it possible to make the background animate?
This is happening because of position:absolute in .hoverme
try changing it to position:relative add margin-left:150px; (or required) to correct position of .hoverme ... like this:
.hoverme{
border-radius:90px;
display: block;
width:50px;
height:50px;
top:50px;
right:-90px;
position:relative;
margin-left:150px;
-webkit-transform: rotate(-45deg);
}
check it in action here: http://jsfiddle.net/WKVJ9/1/
I want to make a div slide over another backward one, but no idea how to any tips?
i can make the animation but when i mouse over the animaton dont work properly, can someone explain me why?
<!DOCTYPE html>
<html>
<head>
<style>
.fundo_main {
width:200px;
height:200px;
background-color:red;
position:relative;
}
.fundo_main:hover {
width:200px;
height:200px;
-webkit-animation-name:myfirst;
position:relative;
}
.fundo {
width:200px;
height:200px;
background-color:red;
position:relative;
-webkit-animation-name:myfirst;
}
.fundo:hover {
width:200px;
height:200px;
background-color:blue;
-webkit-animation-name:myfirst;
-webkit-animation-duration:.3s;
-webkit-animation-timing-function:linear;
-webkit-animation-direction:left;
}
#-webkit-keyframes myfirst {
0% { width:0px; }
65% { width: 150px;}
100% { width:200px; }
}
</style>
</head>
<body>
<div class="fundo_main">
<div class="fundo"></div>
</div>
</body>
</html>
I would say change this:
.fundo:hover
To this one:
.fundo_main:hover .fundo