放大图片：悬停

我开始学习使用HTML和CSS玩。放大图片：悬停

我有一些想法，我知道这是可能的JavaScript的帮助。但我想知道它是否可能只是与CSS。

这里是我的形象：

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

这里是CSS部分：

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

是他们的一种方式来单击图像，然后弹出？ “悬停”的作品，但我想'弹出'留下来。因为这部分工作后，但我想添加有关图像（超链接或其他）的信息。

我发现.picturegoeshere:active但仅使得较大，而鼠标点击仍然下来..

我敢肯定，很多人都问同样的问题，但我似乎无法找到自己的问题，我必须搜索错误的问题，因为我不知道CSS的术语，但我猜？

来源

2015-06-23 Pavle Stojanovic

想要在新窗口中弹出吗？或者你是否希望它出现在页面内弹出，类似于http://www.jacklmoore.com/colorbox/ –

http://stackoverflow.com/questions/13630229/onclick-in-css – Rishav

请参阅本文http://jsfiddle.net/b68Xb/ –

没有不喜欢你正在做的...

如果你想用这个CSS才做到这一点... 因为你知道你可以使用对焦而不是点击！对！（均意味着相同）。只是在屏幕上创建一个弹出菜单并隐藏，然后使用CSS这样

＃此搜索：重点#popupmenu {

显示family：宋体;

}

你需要什么::: 1.只需在屏幕上显示的图像第一。

使用位置显示弹出菜单：fixed;
然后隐藏你的菜单。
隐藏使用

＃image1的后：焦点#popupmenu {显示：初始; }

此为你创建一个弹出式菜单。对于关闭按钮和拇指改变

来源

2015-06-23 05:54:02

谢谢队友！我做了一些变化，以使其工作:)我还有其他事情可以继续前进，但我需要更多的Google：）...再次感谢。 –

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

来源

2015-06-23 05:51:57

我想你

使用同样的方法在寻找这样的：

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"> 
 
\t <a class="button" href="#popup1">Let me Pop up</a> 
 
</div> 
 

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

检查这个网站： -

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

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

来源

2015-06-23 06:24:09

放大图片：悬停

回答

相关问题