Image hover and transform issue - css

Two images each 50% width. I want to hover on the left image and it should widen to 52% over the right image. The right image should not move. Hover the right image and it should widen to 52% over the left image and the left image should not move.
Two issues...
1. The hover over the left image works but moving off it, it doesn't transform gracefully back to 50% but instead, it jumps back as if no transition effect is applied.
2. hovering the right image moves the right image to the left instead of expanding it.
CSS is shown here and I can't seem to identify what part(s) is/are incorrect so I am asking for help.
<style>
body{
box-content: border-box;
}
.photo_section_new {
display:flex;
}
.photo_section_new > div {
height:800px;
flex-grow:1;
transition:0.5s;
background-size:cover;
background-position:center;
background-repeat: no-repeat;
}
.photo_section_new > div:nth-child(1) {
border-bottom: 20px solid #c54985;
border-top: 20px solid #c54985;
background:#000 url(https://picsum.photos/id/1003/600/600);
background-size: cover;
}
.photo_section_new > div:nth-child(2) {
border-bottom: 20px solid #005d99;
border-top: 20px solid #005d99;
background:#000 url(https://picsum.photos/id/103/600/600);
background-size: cover;
}
.photo_section_new > div:nth-child(3) {
display:none;
}
.photo_section_new > div:hover {
flex-grow:1.1;
}
</style>
<div class='photo_section_new'>
<div id='main_photo'>
</div>
<div id='second_photo'>
</div>
<div class='clear'></div>
</div>
Neither image should move/change position. They should each just expand over the other when they are hovered over. I'd appreciate any suggestions you might have.

You are overcomplicating a simple task. Here is an easier idea using flexbox:
.container {
display:flex;
}
.container > div {
height:200px;
border-bottom:5px solid;
flex-grow:1;
transition:0.5s;
background-size:cover;
background-position:center;
}
.container > div:first-child {
background-image:url(https://picsum.photos/id/1003/600/600)
}
.container > div:last-child {
background-image:url(https://picsum.photos/id/103/600/600)
}
.container > div:hover {
flex-grow:1.1;
}
<div class="container">
<div></div>
<div></div>
</div>

Related

Two background images, one with a percentage size and the other one cover what's left?

I have a div and I would like half of the div to be covered in a gradient and the other half to be a normal image but with the same effect as background-size:cover; and have it fill up the remaining space to the right of the gradient. Is this possible?
div {
width:100%;
height:400px;
background-image:url(http://placehold.it/100x100);
background-size: 50% cover;
background-position: 100% center;
background-repeat:no-repeat;
}
div:before {
content:"";
display:block;
width:50%;
height:100%;
background-image: linear-gradient(red, yellow);
}
<div></div>
Unfortunately this doesn't seem to work. I can use background-size: 50% auto; but that doesn't give me quite what I am looking for. I realize I could just split this into two divs, but I just wanted to see if it was possible to do it with one.
Use multiple background and some padding, background-origin trick. The idea is to define padding as half the width and put the image on the content-box which will be the other half.
You have to use vw unit but there is a small drawback as it consider the width of the scroll. It can also be an issue if the div is not meant to be a full width div.
.box {
padding-left:50vw;
height:300px;
background:
linear-gradient(red, yellow) left/50vw 100%,
url(http://placehold.it/400x400) center/cover content-box;
background-repeat:no-repeat;
}
body {
margin:0;
}
<div class="box"></div>
Or simply use both pseudo element:
.box {
height:300px;
position:relative;
}
div::before,
div::after {
content:"";
position:absolute;
top:0;
bottom:0;
width:50%;
}
div::before {
left:0;
background:linear-gradient(red, yellow);
}
div::after {
right:0;
background:url(http://placehold.it/400x400) center/cover;
}
body {
margin:0;
}
<div class="box"></div>

repeat-y left 50px repeats image on top as well

I have the following rule:
background: url(../img/redlines.png) repeat-y left 50px;
As you can see, the background image should start 50px below its div, and it works with no-repeat, but if I set repeat-y part of the image shows up at top of the div as well.
Any way to avoid this, and to keep repeating downwards only?
This is how it's supposed to function. For a tiled image, the position is merely the starting position. I would suggest something like:
HTML
<div class="foo">
<div class="bar">
<div class="content">
</div>
</div>
</div>
CSS
.foo {
padding-top: 50px;
}
.bar
background: url(../img/redlines.png) repeat-y left top;
}
.content {
margin-top: -50px;
}
When you use repeat-y, adding 50px to the top only changes the floating point of where the repeat starts.
You will need to add margin or relative/absolute positioning to achieve the same effect.
as you haven't provided a jsfiddle or any images, i'm assuming you could try background-position attribute in css.
refer to: http://www.w3schools.com/cssref/pr_background-position.asp
you may try :after on your container, see this example:jsfiddle
<div id="test"></div>
#test {
width: 500px;
height: 500px;
position:relative;
}
#test:after {
content:"";
position:absolute;
top:50px;
left:0;
right:0;
bottom:0;
background: url(http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg) repeat-y left;
}

how to set a border that does not affect background image

I know I can use box-sizing:border-box; to create the border inside an elements actual width, but I want my image to be not affected by the border.
example:
div {
width:100px;
height:100px;
box-sizing:border-box;
background-image:url("someplace/demo.jpg");
background-size:100%;
border:1px solid black;
}
With the codes above, the image width and height will be 98px, because border takes 1 pixel for each parallal sides.
But I want my image to still stay 100 px / 100% and border as an overlaping border on top of the image.
Is there any way to do this ???
you need to set background-size to actual size of your container.
div {
width:100px;
height:100px;
box-sizing:border-box;
background:url("http://lorempixel.com/100/100") center no-repeat ;
background-size:100px 100px;
border:1px solid black;
}
img ~ div {
border:15px solid rgba(100,200,0,0.5);
}
div + div {
background-size:100%;
}
div, img {
display:inline-block;
}
<div></div>
<img src="http://lorempixel.com/100/100"/>
<div></div>
<div></div>
I inserted image and bigger border in demo to easely see the different effects
for he outline , you will need ,outline offset
div {
width:100px;
height:100px;
box-sizing:border-box;
background:url("http://lorempixel.com/100/100") center no-repeat ;
background-size:100px 100px;
outline:15px solid rgba(100,200,0,0.5);
outline-offset:-15px;
}
<div></div>
border increased to make effect obvious
or box-shadow ?
div {
width:100px;
height:100px;
box-sizing:border-box;
background:url("http://lorempixel.com/100/100") center no-repeat ;
background-size:100px 100px;
box-shadow:inset 0 0 0 15px rgba(100,200,0,0.5);
}
<div></div>
use outline instead of border
div {
width: 100px;
height: 100px;
background-image: url("someplace/demo.jpg");
background-size: 100%;
outline: 1px solid black;
}
.classname {
outline: 2px solid red;
}
Ref: http://www.w3schools.com/cssref/css3_pr_outline-offset.asp

CSS - Div background Image not being displayed

I am attempting to display a background non-repeated picture on the top right corner of my div. I am using the following code
<html>
<head>
<style>
.UseA
{
display:block;
/* Display image in the top left corner */
background-image:url('paper.gif');
*/--------------------------------------*/
text-indent:10px;
border-radius: 10px;
background: #BADA55;
min-height:50px;
width:300px;
}
.UseA .dta
{
display:block;
border-radius: 10px;
width:130px;
background-color:grey;
color:white;
position:relative; /*Relative to normal position*/
left:160px; /*Move away from left*/
}
</style>
</head>
<body>
<div class="UseA">
Hello , My name is Jim
<div class="dta">something here</div>
</div>
</body>
</html>
However The image is not being displayed.
I am trying this code out here Any suggestions on what I might be doing wrong ?
You declare background: #BADA55; after background-image, so it's overwriting it.
Try this instead:
UseA {
display:block;
text-indent:10px;
border-radius: 10px;
background: #BADA55 url('paper.gif') no-repeat top right;
min-height:50px;
width:300px;
}
You're overwriting background-image with background. Combine them:
http://jsfiddle.net/isherwood/ANr6K/
background: url('image.png') right top no-repeat #BADA55;
If your papaer.gif asset is correct, then remove your background color for .UseA
.UseA
{
display:block;
/* Display image in the top left corner */
background-image:url('paper.gif');
*/--------------------------------------*/
text-indent:10px;
border-radius: 10px;
background: #BADA55;
min-height:50px;
width:300px;
}
Change to
.UseA
{
display:block;
/* Display image in the top left corner */
background-image:url('paper.gif');
*/--------------------------------------*/
text-indent:10px;
border-radius: 10px;
min-height:50px;
width:300px;
}
Sample on Fiddle using Google image as a background: http://jsfiddle.net/C9qdL/

Problem implementing CSS Sprites

This is my image:-
http://www.flickr.com/photos/50525207#N02/5064283850/
CSS n html
Now the problem:-
When I hover over links the same image appears when I want different parts of the image to appear. Also the other links shift when I move mouse over one link. What I want is this:-
http://www.flickr.com/photos/50525207#N02/5063686801/
What I want is a grey colored image to appear in the background when the mouse is hovered over "Link1". A green colored image is to appear when the mouse is hovered over "Link2" and so on. What am I doing wrong? I have been trying to make it work since yesterday but in vain.
PS: erm, that's not the actual image BTW. I don't want colors in the background. It's going to be images of products. Oh, and I want that grey image to appear when no link is hovered over. How to do that?
[EDIT]
I added the following in the CSS:-
.sprite Div
{
width: 728px;
height: 243px;
}
.sprite a
{
width: 728px;
height: 243px;
}
In the HTML IK included the links inside of Div so the height gets fixed:-
<div id="SpriteDiv" class="sprite">
My links here...
</div>
First, you should set a size of your anchor element without hover, this is what's causing your other links to shift around (the dimensions shouldn't be defined on a:hover):
.sprite a {
display: block;
width: 728px;
height: 243px;
}
Next, your image background is assigned to the anchor elements, not the span, so you need to define those positions with the selector like this:
.sp_ID1 a {
background-position: 0px 0px;
}
Corrected according to your comment:
Originally I put the gray background on .container, but that causes strange behavior on Chrome, so I added .sp_ID0
<style type="text/css">
.sprite { display: block; margin-bottom: 5px; }
.container, .sp_ID0, .sprite div { width: 600px; height: 203px; }
.sp_ID0, .sprite:hover div {
background-image: url(http://farm5.static.flickr.com/4106/5064283850_fc6b5fac15_b.jpg);
background-repeat: no-repeat;
}
.container { position:relative; }
.sp_ID0 { z-index: -2; }
.sprite div { display: none; z-index: -1; }
.sp_ID0, .sprite:hover div { position: absolute; top: 0px; left: 0px; display: block; }
.sp_ID1 div { background-position: 0px -203px; }
.sp_ID2 div { background-position: 0px -406px; }
.sp_ID3 div { background-position: 0px -609px; }
.sp_ID4 div { background-position: 0px -812px; }
.sp_ID5 div { background-position: 0px -203px; }
.sp_ID6 div { background-position: 0px -406px; }
</style>
<div class="container">
<div class="sp_ID0"> </div>
Link1<div> </div>
Link2<div> </div>
Link3<div> </div>
Link4<div> </div>
Link5<div> </div>
Link6<div> </div>
</div>
Old solution.

Resources