CSS Image Centered

Question

I want the image to be centered and zoomed when clicked.So far this is what i have.The problem is that when i hold the click on the image to zoom it, the h2 and first 2 paragraph goes a bit to the right. Also i want it to stay zoomed when clicked, not just when i hold the click. This is the HTML :

<div class="text1">

    <a href="#" style="text-decoration: none"><img src="house.jpg" width="200" height="150" >
    <h2>house</h2>
    <p>text</p></a>
    <p>texting</p>
    <p>txt</p>

</div>

And this is the css :

.text1 img{
float:right;
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
        }

.text1 img:active {
    float:left;
    position: relative;
    display: inline-block;
    height: 100%;
    left:50%;
    transform:scale(4);
}

Edit :

 <script>

    var house = document.getElementById("house");
   function functie() {
        if(this.className == "enlarged")
            this.className = "";
        else
            this.className = "enlarged";
    }

</script>

And this is in the CSS:

.text1 img{
    float:right;
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
            }

#house.enlarged{
    float:left;
    position: relative;
    display: inline-block;
    height: 100%;
    left:50%;
    transform:scale(4);
}

I preferred the original no-javascript approach, personally. I thought it was a brilliant move that only a notice could come up with! Good going, new frontier of the web! — starlocke, Dec 28 '14 at 13:57
Please make use of a "live demo" site such as JSFiddle or JSBin for your example code, it would make debugging it much easier. — starlocke, Dec 28 '14 at 13:59
See where you've closed your anchor tag. Try this (I have just modified Rapti's answer): **[JS Fiddle](http://jsfiddle.net/j1tvm8jn/)** — The Pragmatick, Dec 28 '14 at 15:02

Rapti · Answer 1 · 2014-12-28T14:11:24.010

0

You can't do this without JavaScript. (Update: Apparently you can. See starlocke's answer. I will discuss the JS solution, however.)

First, you should add an ID to the image to make it easier to select. I gave it the ID house, but you can pick whatever you like.

Second, change your CSS selector from .text1 img:active to a class name like enlarged. This class will later be assigned to your image when you click it.

Next, here's your JavaScript code:

var house = document.getElementById("house"); // Selects your image
house.onclick = function() { // Adds click listener
    this.className = "enlarged"; // Adds the class to the image, thus applying the new css properties
};

Here's a working JSFiddle: http://jsfiddle.net/jabdauc0/

This solution also makes it unnecessary to wrap your image with an <a> tag, not to mention that you forgot the closing </a>.

EDIT: Use this script to revert the original state when clicking the image again:

var house = document.getElementById("house");
house.onclick = function() {
    if(this.className == "enlarged")
        this.className = "";
    else
        this.className = "enlarged";
};

EDIT²: If you know your image always has a width of 200px, you can use the following CSS to center it:

#house.enlarged {
    position: absolute;
    left: 50%;
    margin-left: -100px;
}

I also removed float: left as this was the cause for the text jumping to the right.

edited Dec 28 '14 at 14:11

answered Dec 28 '14 at 13:36

Rapti

2,520
3
20
23

You code works somehow, but still i doesn't center the image, it just zoom it – Angelo Dec 28 '14 at 13:42
All I did is applying your CSS. I will look into centering it now. – Rapti Dec 28 '14 at 13:43
It is in fact possible to do it with pure CSS. An example (hidden input checkbox): http://stackoverflow.com/questions/21919044/css3-transition-on-click-using-pure-css – starlocke Dec 28 '14 at 13:44
JS code doesnt work actually :-?? It doesnt zoom or anything on click – Angelo Dec 28 '14 at 13:50
Edited my post. Check it out. Also added at img onclick="functie()" – Angelo Dec 28 '14 at 13:55
You must include the script after the HTML or make it wait until the document is loaded. Try wrapping `document.addEventListener('DOMContentLoaded', function() { / *JS code here ... */ }, false);` around it. – Rapti Dec 28 '14 at 14:05
I also edited my post about an hour ago. It contains CSS to center the image now. – Rapti Dec 28 '14 at 15:09

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

For a pure HTML+CSS solution, try something like this: http://jsbin.com/neweyujube/1/edit?html,css,output

Edit, more like OP (right-aligned start, added left translation): http://jsbin.com/koraxowecu/1/edit

It's conveniently already centred in the example, and, I suppose that you'll need to add additional wrappers so that the centre effect is consistent in your context. I assume you're sufficiently experienced and skilled enough to handle that much work/tinkering having a working example already at your disposal.

When I made the edits the first time, I had rotate + scale effects in place, and it worked quite nicely.

This has been a natural extension of : https://stackoverflow.com/a/21919261/508823

edited May 23 '17 at 10:26

Community

1
1

answered Dec 28 '14 at 13:56

starlocke

3,407
2
25
38

But JS is needed. OP specifies that image has to be enlarged (which is done by a hidden input) **and** centring the image **on clicking**. This needs JS. – The Pragmatick Dec 28 '14 at 14:56
You didn't actually look at the jsbin example, did you (the first link in my answer)? It does both, and javascript was not involved. – starlocke Dec 28 '14 at 15:21
It was already centered. You already centered the image. OP asked to center on click. See Rapti's example. Image is initially on right. Then on click, it enlarges and comes to the center. – The Pragmatick Dec 28 '14 at 15:26
Okay. No problem. Just add a translate(#px, #px) to the animation, assuming that the context has a fixed layout. – starlocke Dec 28 '14 at 16:36
In any case, JavaScript is not needed. Just use a pair of sufficiently creatively CSS rules. – starlocke Dec 28 '14 at 16:41

CSS Image Centered

2 Answers2