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?

Answer 1

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

Answer 2

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.

2. Show the popup menu by using position:fixed;

3. And then hide your menu.

4. After hide use

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

5. This create a popup menu for you.

6. Use same method for close button and for thumb changing

Answer 3

<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;
   }