Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Hoverover enlarge – How to center it

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • September 4, 2015 at 9:30 pm #207654
    weso9980
    Participant

    Hi there,

    I have a HTML / CSS site that is pretty much completed. Except for one bit where I want the image to enlarge when hovered over. This isn’t my problem though, when it enlarges I want it to be in the exact centre of the screen (So that it is readable).

    I’m using 5grid css, but other than that it’s pretty standard panel formatting.

    Any ideas?

    <article id=”work” class=”panel”>
    <header>
    <h2>Blurb</h2>
    </header>

    Blurb.

    &lt;section class="5grid is-gallery"&gt;
    &lt;div&gt;
    &lt;div&gt; &lt;a href="images/1.jpg"&gt;&lt;img src="images/1.jpg" alt="" /&gt;&lt;/a&gt; &lt;/div&gt;
    &lt;div&gt; &lt;a href="images/2.jpg"&gt;&lt;img src="images/2.jpg" alt="" /&gt;&lt;/a&gt; &lt;/div&gt;
    &lt;div&gt; &lt;a href="images/3.jpg"&gt;&lt;img src="images/3.jpg" alt="" /&gt;&lt;/a&gt; &lt;/div&gt;
    &lt;/div&gt;
    &lt;/section&gt;
    &lt;/article&gt;

    CSS style

    .image-full
    {
    display: block;
    width: 100%;
    margin: 0 0 2em 0;
    }

  • Author
    Posts
Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.