I am working on an animated CSS3 image gallery where clicking on a picture will magnify the picture to a larger scale. However, I feel as though my initial CSS code to style the gallery before enlarging an image has enforced the width to remain the same. I have attempted to set the width on :focus parameter and custom :focus:nth-child parameters, and yet it stays the same width. I forgot to mention the height adjusts just fine with the desired px length given within the :focus method. You can find the source code on my Github Repository in the index.html file and stylesheets/image-gallery.css
My guess is that the .gallery a {... width:200px; ...} is the cause for the unchangeable width, however within the same method I am setting the height as well, so I am incredibly confused on why it is not adjusting to the desired width. Oh, and by the way, excuse the messy HTML and CSS coding, I am still in the building phase of the website and will tidy up the code later on down the road. Thank you very much for the help in advance, it will help me out a whole lot!
like this
img{
width: 200px;
transition: all .2s linear;
&:hover{
width: 400px;
}
}
<img src="http://www.placehold.it/200x200" alt="" />
Have you tried something like width:400px !important;? The !important declaration helps you to easily override properties on your css rules.
Related
I am using SquareSpace for the building blocks of my site and creating some custom CSS to fine tune. I'm trying to get the gallery page to display the images with more height. At the moment they are not very big in the slider, especially when viewed on a large monitor, seems like there is a lot of wasted space.
Using Inspect Element, I found there to be some HTML styling the height and restricting it to 500px.
<div class="slideshow strip main sqs-gallery-design-strip rendered: id="yui_3_17_2_1_1441831607164_254" style="height: 500px; margin-top: 203:5px;">
Changing the height from 500px to 600px in Firebug works perfectly, so I tried to apply some custom code to in the SquareSpace site. I used:
.slideshow strip main sqs-gallery-design-strip rendered {
height: 600px;
}
The injection of code did not have a visible result on the page. Am I writing the CSS incorrectly? Is there something I'm missing here? Please help.. Thank you!
Try to clear your cache. Sometimes a cache does not refresh on a server.
To clear it on a site, just hit Ctrl+F5.
Your CSS rule is close. It should read:
.slideshow.strip.main.sqs-gallery-design-strip.rendered {
height: 600px !important;
}
I am making a responsive website where I have used the img attribute in the HTML markup so that images scale nicely, to the point where they are moved about with media queries.
(Similar to this fiddle http://jsfiddle.net/QfDv5/ except I have used seperate images.)
However, for ease of updating, I want to add the image paths to the css file instead of the HTML markup. I thought the img-background attribute would be good to do this. That said, I want to stay away from 'background-size' attribute since older browsers don't play nice with it.
I thought of making an element within each of the scaling class divs. The div scales horizontally IF I declare a fixed height, but I cannot seem to get it to scale vertically automatically. I added:
#test-2{
width:100%;
height:100px;
background-image:url("http://www.desibucket.com/db2/01/26039/26039.jpg");
}
jsfiddle
What am I missing in getting the new element to scale without a fixed height?
How can I get the actual background image to scale with the new element?
Thanks
solution is using media queries and set the exact height you want.
media screen and (min-width: 1234px) and (min-height:700px) {
image {height: xxxpx;}
}
Is it possible to somehow overwrite an image with a new image with background-image?
I wan't to be able to change an image depending if it's retina or not with css.
Example
HTML:
<img id="foo" src="foo.png">
CSS:
#foo { background: url("bar.png") }
Seems a bit of a convoluted strategy to me. Let me suggest a better option for dealing with retina-quality images. The simplest strategy I've seen for this (and I feel the best, at this stage) is to make the image twice the width and height you need it in Photoshop, then save it at a fairly low quality to keep file size down. In your HTML, or in your CSS, or both, set the desired width and height of the image. It will look great on both regular and retina screens that way, and still have a very small file size. And you only need one image, too, which is great.
Try css3 :before :
img{
display:none;
}
img:before{
content: "";
width: 20px;
height: 20px;
background: url("bar.png");
}
I'm trying to set the sizing for my list item's icon. Basically, I need to set the height and width to be 27 pixels whilst the image is actually 54 pixels wide and high. This is for use with retina graphics so that it will display properly on older and newer iPhones. Here is my code:
<ul data-dojo-type="dojox.mobile.TabBar">
<li id="footerHomeButton" class="sizing" data-dojo-type="dojox.mobile.TabBarButton"
icon1="images/new/home_icon#2x.png" onclick="WL.Page.load(INDEX.loadPage(0));">Home</li>
I have tried everything I can think of, from simple height and width tags, to CSS modifications, to Dojo sizings and nothing works. This is rather frustrating, hopefully someone else has encountered a similar problem? Why they don't include icon height and width parameters is beyond me, unless I've missed this in the documentation and you actually can?
Please help! Thanks :)
It works for me using css like below. Hope it'd help. Thanks.
img.mblListItemIcon {
height: 29px;
width: 29px;
overflow:hidden;
}
I was trying to set an image as background image for my django application. But when i set it, it is getting displayed as tiled image. ie without actually stretching the image, same image is tiled and shown 4 times. Can somebody tell me how to stretch the image and set it as a background image. I will paste my code here. I am sure some attribute must be there setting this, which i couldnt find on googling.
<body bgcolor=" #408080" background="/static/paper.jpg" background-size: 100%; >
Instead of using a background image on the body tag you should add a image tag right below body, set the position to absolute and a low z-index and then have width=100% and height=100%.
You need to apply this as a style, not as an attribute. That will work if your browser supports CSS 3:
style="background: url(/static/paper.jpg); background-size: 100%;"
Some background info:
http://css-tricks.com/perfect-full-page-background-image/
http://css-tricks.com/how-to-resizeable-background-image/
In short: no, you can't stretch the background image with html/css1/css2, you're only options is to either use css3 ( witch is not fully suported by all browsers ) or to use background-attachment and background-repeat css porperties to achieve an alternative result …
Another option would be to use an img tag as a background using z-index css proprety however you'll find it dificult to get it working proprely in all major browsers .
You can stretch your background to 100% width and height by putting your image in an <img> tag and give it a z-index of -1 so it acts like a background and is behind everything else. This works in all browsers.
<img src="..." />
img{
position:absolute;
z-index:-1;
width:100%;
height:100%;
}
If you do not want to break the aspect ratio, just set either width or height and not both.
Check working example at http://jsfiddle.net/UXBRM/1/
Edit your image with paint. Click image and save your image according to your need.
This will work in any html , surely.
As others mention, you should always try to define as much of the attributes in your css and not directly where you have the path to the image itself. This is how it was done way back and is deprecated and probably why it is not working.
use the img src="poefwpf.png" and maybe a to easy edit in your css:
#imgex img {
width: 100%;
height: 100%;
(maybe also z-index:-1;)
}