Enlarge an image on :Hover

Question

I started learning playing with HTML and CSS.

I have something in mind, and I know this is possible with the help of JavaScript. But I want to know if its possible just with CSS.

here is my image:

<img id="picturegoeshere" src="picture.png" width="100" height="90">

here is the CSS part:

.picturegoeshere:hover
{
 transform:scale(2,2);
 transform-origin:0 0;
}

Is their a way to click the image, then pop up ? "hover" works but I want the 'popup' to stay. Because after this part works, but I want to add information about the image (hyperlinks or something else).

I found .picturegoeshere:active but that only makes it bigger while the mouse click is still down..

I'm sure many people have asked the same question, but I cant seem to find their questions, I must be searching the wrong questions because I don't know the terminology for CSS yet I guess?

Do you want the pop up in a new window? Or do you want it to appear to pop up within the page, similar to http://www.jacklmoore.com/colorbox/ — Zack Tanner, Jun 23 '15 at 05:27
As far as I know, the functionality that you seek requires a _bit_ of javascript. — xrisk, Jun 23 '15 at 05:29
Check this out! Pure css Pop-up. http://www.sevensignature.com/blog/code/pure-css-popup-without-javascript. Here's the demo: http://codepen.io/imprakash/pen/GgNMXO — Alberto I.N.J., Jun 23 '15 at 05:38

score 3 · Accepted Answer · answered Jun 23 '15 at 05:54

No did not like that you are doing ...

If you want with this css only then do this ... as you know you can use focus instead of click it !right! (both mean same). just create that pop up menu on screen and hide it and then use css like this

#image1:focus #popupmenu{

display:initial;

}

what you need ::: 1. Just show image on the screen first.

Show the popup menu by using position:fixed;
And then hide your menu.
After hide use

#image1:focus #popupmenu{ display:initial; }

This create a popup menu for you.
Use same method for close button and for thumb changing

Thanks mate! I made a couple variations to get it working :) I have other things i can move ahead with now, but I need to Google some more :)...thanks again. — Pavle Stojanovic, Jun 25 '15 at 04:16

score 1 · Answer 2 · answered Jun 23 '15 at 05:51

<a href="#openModal">
 <img src="http://www.cssscript.com/wp-content/themes/iconic-one/img/twitter.png" alt="Follow us on Twitter"></a>

 <div id="openModal" class="modalDialog">
  <div> 
  <a href="#close" title="Close" class="close">X</a>
        <h2>Modal Box</h2>
    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
 </div>

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
 }

 .modalDialog:target {
   opacity:1;
  pointer-events: auto;
 }

 .modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
 }

 .close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
  }

  .close:hover {
    background: #00d9ff;
   }

score 1 · Answer 3 · answered Jun 23 '15 at 06:24

I think you are looking for this:

body {
  font-family: Arial, sans-serif;
  background: url(4.jpg);
  background-size: cover;
}

h1 {
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  color: orange;
  margin: 100px 0;
}

.box {
  width: 20%;
  margin: 0 auto;
  background: rgba(255,255,255,0.2);
  padding: 35px;
  border: 2px solid #fff;
  border-radius: 20px/50px;
  background-clip: padding-box;
  text-align: center;
}

.button {
  font-size: 1em;
  padding: 10px;
  color: #fff;
  border: 2px solid orange;
  border-radius: 20px/50px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-out;
     background: orange;
}
.button:hover {
  background: orange;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 30%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

<h1>Popup/Modal Windows without JavaScript</h1>
<div class="box">
 <a class="button" href="#popup1">Let me Pop up</a>
</div>

<div id="popup1" class="overlay">
 <div class="popup">
  <h2>Here i am</h2>
  <a class="close" href="#">×</a>
  <div class="content">
   Thank to pop me out of that button, but now i'm done so you can close this window.
  </div>
 </div>
</div>

Check this site:-

http://www.sevensignature.com/blog/code/pure-css-popup-without-javascript

http://meyerweb.com/eric/css/edge/popups/demo.html

Enlarge an image on :Hover

3 Answers3