How to force elements to be in middle? - javascript

I am using the following code to show some images but I can't figure out how to move them in middle. Does anyone has any idea?
CSS
.cover-image{
max-width: 300px;
max-height: 250px;
}
HTML
<div class="row" id="covers">
<div class="col-xs-6 col-sm-4">
<div class="cover" style="margin-bottom: 10px;">
<a target="_blank"><img class="cover-image" /></a>
</div>
</div>
</div>
JS
$.ajax({
type : 'GET',
dataType : 'json',
url: 'data.json',
success : function(data) {
var data = data.info;
var covers = document.getElementById("covers");
var blockTemplate = covers.getElementsByTagName("div")[0].cloneNode(true);
covers.getElementsByTagName("div")[0].remove();
data.forEach( function(obj) {
block = blockTemplate.cloneNode(true);
block.getElementsByTagName("a")[0].setAttribute('href', obj.link);
block.getElementsByTagName("img")[0].setAttribute('src', obj.cover);
covers.appendChild(block);
});
$("img").css({"vertical-align":"middle"});
}
});
A demo of what is showing now is here: http://tdhtestserver.herobo.com/test/

Just a try
Is this what you want
Have to use psuedo-css
.cover {
border:1px solid;
height:200px;
width:200px;
vertical-align: middle;
text-align: center;}
.cover:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.cover-image {
margin-left: auto;
margin-right: auto;
display: inline-block;
vertical-align: middle;
}
This may make the question more clear.
Fiddle Demo

If you want to align image middle-center, you can set fixed size to your .cover and set the max-width and max-height to the a. Then you can align the a using absolute position and css transform. Example:
.cover {
width: 300px;
height: 250px;
position: relative;
}
.cover a {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Here is what I tried in JSFiddle:
http://jsfiddle.net/7w5fw7fw/
I placed the images directly into the div container:
<div class="row" id="covers">
<img src="http://sjhitsquad.net/wp-content/uploads/freshizer/3d142cc9444fe922cf69cf90e344ce5f_placeholder-920-350-c.gif">
<img src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif">
<img src="https://www.adspeed.com/placeholder-123x456.gif">
<img src="http://fpoimg.com/300x300?text=Advertisement">
<img src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif">
<img src="http://fpoimg.com/300x300?text=Advertisement">
</div>
Wrapping every single image in a separate div doesn't appeal to me a lot. If there is such a need, than it is better to use <figure>, which is semantic.
And here is the CSS that places the images in the middle:
html, body {
height: 100%;
margin: 0;
}
#covers {
background: yellow;
width: 100%;
min-height: 100%;
text-align: center;
}
img {
max-width: 300px;
min-height: 250px;
vertical-align: middle;
}
The background color is there just to show you how wide and high the container is (as much as the whole body element). Depending on the window width the images may all appear in a single row or break into many rows.
Is this close to your searched behaviour?

Your question is not clear but i think you want this
try to add this on your body
body {
margin: auto !important;
}

Related

Hover over picture in scroll list

I have pictures in a horizontal scroll and I want to be able to hover over each image, and when I do, I want the picture to be slightly "grayed out" with text over it.
I can't for the life of me figure out how to do it.
I made this fiddle to show what my scroll bar looks like.
https://jsfiddle.net/burgoyne/u1zdn80p/1/
#scroll {
height: 25%;
overflow-x: scroll;
white-space: nowrap;
width: 50%;
}
#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}
Can someone point me in the right direction here? I have been trying different things with CSS to gray it out and add text, with no luck.
Thanks!
You have to specify what you want in a CSS img:hover rule, like this:
html, body {
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
#scroll {
height: 25%;
overflow-x: scroll;
white-space: nowrap;
width: 50%;
}
#scroll img {
height: 100%;
vertical-align: top; /* this prevents vertical whitespace */
}
#scroll img:hover {
opacity: .5;
}
<div id="scroll">
<a href="http://www.google.ca"><img src="http://www.fotoviva.co.uk/image/cache/data/prods/doug-blue-lake-500x500.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://wannasmile.com/wp-content/uploads/2009/09/c76c_Gordon-McBryde-Field-Sunset-500x500.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://creativefan.com/important/cf/2012/10/patio-garden-ideas/nice-patio-gardeen.jpg" /><!--
--><a href="http://www.google.ca"><img src="http://globotours.net/wp-content/uploads/2015/05/Desert-Safari-Dubai-500x500.jpg" />
</div>
About the gray color over the image, you can just add opacity to the image on hover ("opacity: 0.5") and, if you want, some transition between the event and the "grayness" with "transition: 0.5s" or so.
About the problem with the text overlay, I think you should visit this answer: Text on image mouseover?
You can place text inside with class named
<span class="text-content"><span>Some text here</span></span>
and then u can use css to place text on the image, something like ...
span.text-content
{
background: rgba(0,0,0,0.5);
color: white;
cursor: pointer;
display: table;
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
span.text-content span
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
I hope this helps.

How can one create a gallery that adapts to the different sizes of images?

In this image:
at this link:
http://www.autofinesse.co.uk/share-n-shine/
There are images of different sizes, the css seems to be generated automatically, i'd like a client to be able to upload to wordpress and not have to worry about the standard sizes of images too much. This gallery is fully aligned for every image, changes height between rows and doesn't make them all the same size.
Is there a library that will allow me to do this? The only way i've been able to do it is with the use of background positioning, which crops the image and also prevents the images being different sizes.
Or is there some sort of javascript algorithm to work this out?
I could give you a css solution but you said for a client on WP.
For that I suggest using a plugin like Unite Gallery which I use for my WP and Joomla clients.
Here is a screen. It also allows for text overlays like the image you posted.
https://wordpress.org/plugins/unite-gallery-lite/
Here is a CSS sample using flex
.flex {
background: #ddd;
padding: 1px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.flex-4by3, .flex-3by4, .flex-1by1, .flex-2by1, .flex-1by2, .flex-3by1, .flex-1by3 {
margin: 1px;
background-color: #efefef;
background-size: cover;
position: relative;
}
.flex-4by3:before, .flex-3by4:before, .flex-1by1:before, .flex-2by1:before, .flex-1by2:before, .flex-3by1:before, .flex-1by3:before {
content: "";
display: block;
}
.flex-4by3 {
flex-grow: 1.33333;
flex-basis: 266.66667px;
max-height: 320px;
max-width: 426.66667px;
background-image: url("http://lorempixel.com/267/200/food");
}
.flex-4by3:before {
padding-top: 75%;
}
.flex-3by4 {
flex-grow: 0.75;
flex-basis: 150px;
max-height: 320px;
max-width: 240px;
background-image: url("http://lorempixel.com/150/200/food");
}
.flex-3by4:before {
padding-top: 133.33333%;
}
.flex-1by1 {
flex-grow: 1;
flex-basis: 200px;
max-height: 320px;
max-width: 320px;
background-image: url("http://lorempixel.com/200/200/food");
}
.flex-1by1:before {
padding-top: 100%;
}
.flex-2by1 {
flex-grow: 2;
flex-basis: 400px;
max-height: 320px;
max-width: 640px;
background-image: url("http://lorempixel.com/400/200/food");
}
.flex-2by1:before {
padding-top: 50%;
}
.flex-1by2 {
flex-grow: 0.5;
flex-basis: 100px;
max-height: 320px;
max-width: 160px;
background-image: url("http://lorempixel.com/100/200/food");
}
.flex-1by2:before {
padding-top: 200%;
}
.flex-3by1 {
flex-grow: 3;
flex-basis: 600px;
max-height: 320px;
max-width: 960px;
background-image: url("http://lorempixel.com/600/200/food");
}
.flex-3by1:before {
padding-top: 33.33333%;
}
.flex-1by3 {
flex-grow: 0.33333;
flex-basis: 66.66667px;
max-height: 320px;
max-width: 106.66667px;
background-image: url("http://lorempixel.com/67/200/food");
}
.flex-1by3:before {
padding-top: 300%;
}
<div class="flex">
<div class="flex-4by3"></div>
<div class="flex-1by1"></div>
<div class="flex-2by1"></div>
<div class="flex-1by2"></div>
<div class="flex-2by1"></div>
<div class="flex-3by4"></div>
<div class="flex-3by4"></div>
<div class="flex-3by4"></div>
<div class="flex-1by2"></div>
<div class="flex-3by1"></div>
<div class="flex-1by1"></div>
<div class="flex-2by1"></div>
<div class="flex-1by3"></div>
<div class="flex-4by3"></div>
<div class="flex-1by1"></div>
<div class="flex-2by1"></div>
<div class="flex-4by3"></div>
<div class="flex-2by1"></div>
<div class="flex-3by4"></div>
<div class="flex-3by4"></div>
<div class="flex-1by1"></div>
<div class="flex-2by1"></div>
</div>
HTML
<div>
<img src="http://imgur.com/kj4qwHl.jpg">
<img src="http://imgur.com/q6pFhhE.jpg">
<img src="http://imgur.com/ngdnoYI.jpg">
<img src="http://imgur.com/FkrSS5O.jpg">
<img src="http://imgur.com/ux0Om6X.jpg">
<img src="http://imgur.com/2ProEc9.jpg">
<img src="http://imgur.com/iu39yRs.jpg">
<img src="http://imgur.com/gx0iOdT.jpg">
<img src="http://imgur.com/6kEuRYX.jpg">
</div>
CSS (SASS)
#mixin rspv($w) {
#media screen and (max-width:$w) {
#if $w==680px {
img:nth-child(n1) {
width:100%;
}
} #else {
#content;
}
}
}
#mixin grid($pc...) {
$len:length($pc);
img {
vertical-align:top;
transition:all 0.5s;
#for $i from 1 through $len {
&:nth-child(#{$i}) {
width: nth($pc,$i)+'%';
}
}
}
}
div {
margin:0 auto;
padding:0 100px;
+grid(26,40.7,33.3,41.9,26.7,31.4,29,38.5,32.5);
#include rspv(860px) {
+grid(39,61,45,55,46,54,42.9,57.1,100);
}
+rspv(680px);
}
EXPLANATION
In the rspv mixin (responsive) it checks if width meets the 680px then (even) and (odd) images will have full size. If not, mixin grid will come into play.
Besides normal property:value pairs, grid takes width from a given parameter $pc (percent) and uses it in the for loop. It will iterate through $i depending on the length of $pc and returns every value from the $pc map.
Since all images are inside of the div, all mixins will be included there. First grid doesn't need a responsive requirement, the second one does, and the last +rspv(680px) doesn't need width calculation.
This should work what your link about cars is showing. Not much code. I recommend, get precompiler for CSS. Without that it would be much more code and a lot harder to make up a plan.
DEMO HERE

How to scale a div to a responsive image

I'm making a responsive website and I want a image next to a div.
While placing the image next to the div is no problem, it gets tricky when I make my screen smaller.
I gave the image a width of 100% and a height of auto (responsive image) and this is the result:
This example is how it needs to be permanent, even when I scale it down.
Right now when I scale it down, this happens:
Because the image is responsive, it shrinks and the div stays in place.
Is there any way to make the div scale with the picture?
My CSS (Made in SASS):
.block-middle{
background-color: $oranje;
color: #fff;
padding-top: 85px;
padding-left: 55px;
padding-right: 55px;
line-height: 30px;
font-size: 18px;
font-weight: 300;
padding-bottom: 87px;
.button-wit-bruin{
margin-top: 30px;
display: inline-block;
}
h1{
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: 700;
padding-bottom: 30px;
}
}
.block-right{
img.liggend{
width: 100%;
height: auto;
}
}
And the HTML is simply:
<div class="col-md-4 no-p block-middle">
<div id="img1_div"></div>
<img id="img1" alt="" />
<script>
$(document).ready( function(){
$(window).on("load", function(){
$(window).on("resize", function(){
var imgHeight = $("#img1").height();
$("#img1_div").height( imgHeight );
}).resize();
});//window load
});//document ready
</script>
This code will work in most cases ( except there's no overriding behaviour ), no matter where your image and div are placed. I would like to mention though that resize and scroll events should not be handled crudely this way, but should be optimised using a global timeout variable.
the trick is to set the height of the div relative to the width...which ironically, you can't do with the height property, since height:auto; makes it the height of it's children.
padding however is relative to the width of the parent...so it's a little bit funky, but if you play with the padding-bottom as a % and make the height:0px; you can achieve the desired effect without using Javascript. Here's the relevant CSS:
.responsive-background {
float:left;
width:60%;
height:0px;
padding-bottom:30%; /* adjust this depending on the height/width of the image you are aligning to */
}
And a Codepen with more detail and some additional styling:
http://codepen.io/ryantdecker/pen/LZYYaj
I think this will do the trick for you.
One way I can think of is, use the image as background for div and use background-size as cover:
.right-block {
background: url('https://placeimg.com/640/480/any');
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
Ahhh sorry I misunderstood your question. This can be done with a bit of flexbox if your target browsers support it. Is this the result you're looking for?
.container {
display: flex;
}
.left-block {
background: red;
width: 50%;
}
.right-block {
width: 50%;
}
.image {
display: block; // Removes spacing around image cause by default display: inline;
width: 100%;
}
<div class="container">
<div class="left-block">
</div>
<div class="right-block">
<img class="image" src="https://placeimg.com/640/480/any">
</div>
</div>
Previous Answer:
It seems as though there's a height set on your .block-right element. The code you provided is rather incomplete as you're missing the markup for your .block-right element. But is this what you're looking for?
.left-block,
.right-block {
float: left;
width: 50%;
}
.left-block {
background: red;
height: 200px;
}
.right-block {
background: grey;
}
.image {
width: 100%;
}
<div class="left-block">
</div>
<div class="right-block">
<img class="image" src="https://placeimg.com/640/480/any">
</div>

Zooming on hover

I have an image with a color overlay and i want to add a zooming on the image when user hover over the image.
I'm trying to achieve this without JQuery but to get the result I don't mind using JQuery.
Thanks in advance
Jsfiddle
HTML:
<div class="rss-output">
<div class="body"> <a target="_blank" href="#">
<div class="overlay-feed"></div>
<div class="imagefix zooming" style="float:none;">
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a>
</div>
</div>
</div>
CSS:
div.rss-output {
float: left;
width: 33.333%;
position: relative;
padding: 15px !important;
overflow: hidden;
}
.rss-output .body {
width: 100%;
position: relative;
}
.rss-output .overlay-feed {
background: #000 none repeat scroll 0% 0%;
z-index: 2;
position: absolute;
width: 100%;
height: 200px;
opacity: 0.5;
}
div.imagefix {
height: 200px;
line-height: 250px;
overflow: hidden;
text-align: center;
width: 100%;
}
div.imagefix img {
margin: -50%;
}
Use following css will do zoom effect:
.overlay-feed:hover + div.imagefix img{
transform: scale(2);
-webkit-transform: -webkit-scale(2);
}
Check your updated Fiddle
The solution proposed by Ketan is good, but I would add an animation, to make the zoom smoother:
For example:
transition: all 1s cubic-bezier(0.23,1,0.32,1);
See updated fiddle (forked from ketan's one): http://jsfiddle.net/alessiozuccotti/84n3hu6v/2/
Or you could change the timing function you prefer. This link may help you:
http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp
You can use css, for example:
.zoom_img img:hover{
-moz-transform:scale(2);
-webkit-transform:scale(2);
-o-transform:scale(2);
}

CSS: margin-left scale as function of image max-width

I have 2x Divs and 1x Img with the following CSS
#StageDiv {
position: absolute;
left: 50%;
margin-left: -200px;
}
#LogoDiv {
position: absolute;
margin-top: 135px;
left: 50%;
margin-left: -500px;
}
#logoimg {
/* max-width: 75%; /* */
width: 1000px; /* */
}
inside of #logoimg, I would like to use max-width: 75%; and then have margin-left: of both #LogoDiv and #StageDiv be a function of #logoimg as it changes
http://jsfiddle.net/3KLUW/1/
Is this possible in pure CSS or will I have to do this in javascript in a on resize event? (not sure what the actual function call is currently but im sure my buddy google will know) I think in the long run, I will most likely have to use a javascript event to scale my kineticjs stage anyway but I am curious to know if there is some CSS wizardry to do the first part.
Thoughts?
Edit:
window.onresize=function(){
var img = document.getElementById('logoimg');
var width = img.offsetWidth;
var div = document.getElementById('LogoDiv');
div.style.marginLeft= "-" + width/2 + "px";
};
still would be interested in a CSS solution
If you can get away with a wrapper div for the whole logo:
<div id="logo">
<div id="StageDiv">...</div>
<div id="LogoDiv">
<img id="logoimg" src="..." />
</div>
</div>
Then you can set the width and max-width on it, and use margin: auto to center it on the page:
#logo {
width: 1000px;
max-width: 75%;
margin: auto;
position: relative;
}
And positioning the other elements become much easier:
#LogoDiv {
top: 135px;
position: absolute;
}
#StageDiv {
text-align: center;
}
#logoimg {
width: 100%;
}
The margin: auto and text-align: center together give us the automatic margin you wanted.
Updated fiddle: http://jsfiddle.net/3KLUW/2/
The canvas will need to be scaled though, as you said on the question.

Categories