在不改变容器尺寸的情况下放大图像

时间：2016-07-12 02:04:25

标签： html css image

所以我有一个图像网格，我正在尝试制作鼠标悬停放大图像但不改变图像容器尺寸的效果。

我目前的代码如下：

!SESSION 2016-07-11 21:44:01.027 -----------------------------------------------
eclipse.buildId=4.4.2.M20150204-1700
java.version=1.8.0_77
java.vendor=Oracle Corporation
BootLoader constants: OS=win32, ARCH=x86, WS=win32, NL=en_US
Framework arguments:  -product org.eclipse.epp.package.java.product
Command-line arguments:  -os win32 -ws win32 -arch x86 -product org.eclipse.epp.package.java.product

!ENTRY org.eclipse.osgi 4 0 2016-07-11 21:44:07.881
!MESSAGE An error occurred while automatically activating bundle org.eclipse.core.resources (77).
!STACK 0
org.osgi.framework.BundleException: Exception in org.eclipse.core.resources.ResourcesPlugin.start() of bundle org.eclipse.core.resources.
    at org.eclipse.osgi.internal.framework.BundleContextImpl.startActivator(BundleContextImpl.java:792)
    at org.eclipse.osgi.internal.framework.BundleContextImpl.start(BundleContextImpl.java:721)
    at org.eclipse.osgi.internal.framework.EquinoxBundle.startWorker0(EquinoxBundle.java:936)
    at org.eclipse.osgi.internal.framework.EquinoxBundle$EquinoxModule.startWorker(EquinoxBundle.java:319)
    at org.eclipse.osgi.container.Module.doStart(Module.java:571)
    at org.eclipse.osgi.container.Module.start(Module.java:439)
    at org.eclipse.osgi.framework.util.SecureAction.start(SecureAction.java:454)
    at org.eclipse.osgi.internal.hooks.EclipseLazyStarter.postFindLocalClass(EclipseLazyStarter.java:107)
    at org.eclipse.osgi.internal.loader.classpath.ClasspathManager.findLocalClass(ClasspathManager.java:531)
    at org.eclipse.osgi.internal.loader.ModuleClassLoader.findLocalClass(ModuleClassLoader.java:324)
    at org.eclipse.osgi.internal.loader.BundleLoader.findLocalClass(BundleLoader.java:320)
    at org.eclipse.osgi.internal.loader.sources.SingleSourcePackage.loadClass(SingleSourcePackage.java:36)
    at org.eclipse.osgi.internal.loader.BundleLoader.findClassInternal(BundleLoader.java:391)
    at org.eclipse.osgi.internal.loader.BundleLoader.findClass(BundleLoader.java:345)
    at org.eclipse.osgi.internal.loader.BundleLoader.findClass(BundleLoader.java:337)
    at org.eclipse.osgi.internal.loader.ModuleClassLoader.loadClass(ModuleClassLoader.java:160)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    at org.eclipse.ui.internal.ide.application.IDEApplication.start(IDEApplication.java:136)
    at org.eclipse.equinox.internal.app.EclipseAppHandle.run(EclipseAppHandle.java:196)
    at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.runApplication(EclipseAppLauncher.java:134)
    at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.start(EclipseAppLauncher.java:104)
    at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:380)
    at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:235)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at org.eclipse.equinox.launcher.Main.invokeFramework(Main.java:648)
    at org.eclipse.equinox.launcher.Main.basicRun(Main.java:603)
    at org.eclipse.equinox.launcher.Main.run(Main.java:1465)
Caused by: org.eclipse.core.internal.resources.ResourceException: Incompatible file format. Workspace was saved with an incompatible version: 0.
    at org.eclipse.core.internal.resources.WorkspaceTreeReader.getReader(WorkspaceTreeReader.java:58)
    at org.eclipse.core.internal.resources.WorkspaceTreeReader.getReader(WorkspaceTreeReader.java:66)
    at org.eclipse.core.internal.resources.SaveManager.restoreTree(SaveManager.java:1036)
    at org.eclipse.core.internal.resources.SaveManager.restore(SaveManager.java:699)
    at org.eclipse.core.internal.resources.SaveManager.startup(SaveManager.java:1565)
    at org.eclipse.core.internal.resources.Workspace.startup(Workspace.java:2464)
    at org.eclipse.core.internal.resources.Workspace.open(Workspace.java:2219)
    at org.eclipse.core.resources.ResourcesPlugin.start(ResourcesPlugin.java:447)
    at org.eclipse.osgi.internal.framework.BundleContextImpl$3.run(BundleContextImpl.java:771)
    at org.eclipse.osgi.internal.framework.BundleContextImpl$3.run(BundleContextImpl.java:1)
    at java.security.AccessController.doPrivileged(Native Method)
    at org.eclipse.osgi.internal.framework.BundleContextImpl.startActivator(BundleContextImpl.java:764)
    ... 29 more
Root exception:
org.eclipse.core.internal.resources.ResourceException: Incompatible file format. Workspace was saved with an incompatible version: 0.
    at org.eclipse.core.internal.resources.WorkspaceTreeReader.getReader(WorkspaceTreeReader.java:58)
    at org.eclipse.core.internal.resources.WorkspaceTreeReader.getReader(WorkspaceTreeReader.java:66)
    at org.eclipse.core.internal.resources.SaveManager.restoreTree(SaveManager.java:1036)
    at org.eclipse.core.internal.resources.SaveManager.restore(SaveManager.java:699)
    at org.eclipse.core.internal.resources.SaveManager.startup(SaveManager.java:1565)
    at org.eclipse.core.internal.resources.Workspace.startup(Workspace.java:2464)
    at org.eclipse.core.internal.resources.Workspace.open(Workspace.java:2219)
    at org.eclipse.core.resources.ResourcesPlugin.start(ResourcesPlugin.java:447)
    at org.eclipse.osgi.internal.framework.BundleContextImpl$3.run(BundleContextImpl.java:771)
    at org.eclipse.osgi.internal.framework.BundleContextImpl$3.run(BundleContextImpl.java:1)
    at java.security.AccessController.doPrivileged(Native Method)
    at org.eclipse.osgi.internal.framework.BundleContextImpl.startActivator(BundleContextImpl.java:764)
    at org.eclipse.osgi.internal.framework.BundleContextImpl.start(BundleContextImpl.java:721)
    at org.eclipse.osgi.internal.framework.EquinoxBundle.startWorker0(EquinoxBundle.java:936)
    at org.eclipse.osgi.internal.framework.EquinoxBundle$EquinoxModule.startWorker(EquinoxBundle.java:319)
    at org.eclipse.osgi.container.Module.doStart(Module.java:571)
    at org.eclipse.osgi.container.Module.start(Module.java:439)
    at org.eclipse.osgi.framework.util.SecureAction.start(SecureAction.java:454)
    at org.eclipse.osgi.internal.hooks.EclipseLazyStarter.postFindLocalClass(EclipseLazyStarter.java:107)
    at org.eclipse.osgi.internal.loader.classpath.ClasspathManager.findLocalClass(ClasspathManager.java:531)
    at org.eclipse.osgi.internal.loader.ModuleClassLoader.findLocalClass(ModuleClassLoader.java:324)
    at org.eclipse.osgi.internal.loader.BundleLoader.findLocalClass(BundleLoader.java:320)
    at org.eclipse.osgi.internal.loader.sources.SingleSourcePackage.loadClass(SingleSourcePackage.java:36)
    at org.eclipse.osgi.internal.loader.BundleLoader.findClassInternal(BundleLoader.java:391)
    at org.eclipse.osgi.internal.loader.BundleLoader.findClass(BundleLoader.java:345)
    at org.eclipse.osgi.internal.loader.BundleLoader.findClass(BundleLoader.java:337)
    at org.eclipse.osgi.internal.loader.ModuleClassLoader.loadClass(ModuleClassLoader.java:160)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    at org.eclipse.ui.internal.ide.application.IDEApplication.start(IDEApplication.java:136)
    at org.eclipse.equinox.internal.app.EclipseAppHandle.run(EclipseAppHandle.java:196)
    at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.runApplication(EclipseAppLauncher.java:134)
    at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.start(EclipseAppLauncher.java:104)
    at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:380)
    at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:235)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at org.eclipse.equinox.launcher.Main.invokeFramework(Main.java:648)
    at org.eclipse.equinox.launcher.Main.basicRun(Main.java:603)
    at org.eclipse.equinox.launcher.Main.run(Main.java:1465)

!ENTRY org.eclipse.osgi 4 0 2016-07-11 21:44:07.991
!MESSAGE Application error
!STACK 1
java.lang.NoClassDefFoundError: org/eclipse/core/resources/IContainer
    at org.eclipse.ui.internal.ide.application.IDEApplication.start(IDEApplication.java:136)
    at org.eclipse.equinox.internal.app.EclipseAppHandle.run(EclipseAppHandle.java:196)
    at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.runApplication(EclipseAppLauncher.java:134)
    at org.eclipse.core.runtime.internal.adaptor.EclipseAppLauncher.start(EclipseAppLauncher.java:104)
    at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:380)
    at org.eclipse.core.runtime.adaptor.EclipseStarter.run(EclipseStarter.java:235)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at org.eclipse.equinox.launcher.Main.invokeFramework(Main.java:648)
    at org.eclipse.equinox.launcher.Main.basicRun(Main.java:603)
    at org.eclipse.equinox.launcher.Main.run(Main.java:1465)
Caused by: java.lang.ClassNotFoundException: An error occurred while automatically activating bundle org.eclipse.core.resources (77).
    at org.eclipse.osgi.internal.hooks.EclipseLazyStarter.postFindLocalClass(EclipseLazyStarter.java:116)
    at org.eclipse.osgi.internal.loader.classpath.ClasspathManager.findLocalClass(ClasspathManager.java:531)
    at org.eclipse.osgi.internal.loader.ModuleClassLoader.findLocalClass(ModuleClassLoader.java:324)
    at org.eclipse.osgi.internal.loader.BundleLoader.findLocalClass(BundleLoader.java:320)
    at org.eclipse.osgi.internal.loader.sources.SingleSourcePackage.loadClass(SingleSourcePackage.java:36)
    at org.eclipse.osgi.internal.loader.BundleLoader.findClassInternal(BundleLoader.java:391)
    at org.eclipse.osgi.internal.loader.BundleLoader.findClass(BundleLoader.java:345)
    at org.eclipse.osgi.internal.loader.BundleLoader.findClass(BundleLoader.java:337)
    at org.eclipse.osgi.internal.loader.ModuleClassLoader.loadClass(ModuleClassLoader.java:160)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    ... 13 more
Caused by: org.osgi.framework.BundleException: Exception in org.eclipse.core.resources.ResourcesPlugin.start() of bundle org.eclipse.core.resources.
    at org.eclipse.osgi.internal.framework.BundleContextImpl.startActivator(BundleContextImpl.java:792)
    at org.eclipse.osgi.internal.framework.BundleContextImpl.start(BundleContextImpl.java:721)
    at org.eclipse.osgi.internal.framework.EquinoxBundle.startWorker0(EquinoxBundle.java:936)
    at org.eclipse.osgi.internal.framework.EquinoxBundle$EquinoxModule.startWorker(EquinoxBundle.java:319)
    at org.eclipse.osgi.container.Module.doStart(Module.java:571)
    at org.eclipse.osgi.container.Module.start(Module.java:439)
    at org.eclipse.osgi.framework.util.SecureAction.start(SecureAction.java:454)
    at org.eclipse.osgi.internal.hooks.EclipseLazyStarter.postFindLocalClass(EclipseLazyStarter.java:107)
    ... 22 more
Caused by: org.eclipse.core.internal.resources.ResourceException: Incompatible file format. Workspace was saved with an incompatible version: 0.
    at org.eclipse.core.internal.resources.WorkspaceTreeReader.getReader(WorkspaceTreeReader.java:58)
    at org.eclipse.core.internal.resources.WorkspaceTreeReader.getReader(WorkspaceTreeReader.java:66)
    at org.eclipse.core.internal.resources.SaveManager.restoreTree(SaveManager.java:1036)
    at org.eclipse.core.internal.resources.SaveManager.restore(SaveManager.java:699)
    at org.eclipse.core.internal.resources.SaveManager.startup(SaveManager.java:1565)
    at org.eclipse.core.internal.resources.Workspace.startup(Workspace.java:2464)
    at org.eclipse.core.internal.resources.Workspace.open(Workspace.java:2219)
    at org.eclipse.core.resources.ResourcesPlugin.start(ResourcesPlugin.java:447)
    at org.eclipse.osgi.internal.framework.BundleContextImpl$3.run(BundleContextImpl.java:771)
    at org.eclipse.osgi.internal.framework.BundleContextImpl$3.run(BundleContextImpl.java:1)
    at java.security.AccessController.doPrivileged(Native Method)
    at org.eclipse.osgi.internal.framework.BundleContextImpl.startActivator(BundleContextImpl.java:764)
    ... 29 more

但它使整个图像增大了1.25。有没有办法限制大小保持不变但提供相同的比例功能？如果需要，我愿意使用JS。

1 个答案:

答案 0 :(得分：2)

同意@Marat评论，但 溢出：隐藏 应添加到图片的父级。

你可以在这里查看我的笔以便更好地理解。如果有任何意见，请告诉我。

.wrapper {
  max-width: 80em;
  margin: 0 auto;
}
.wrapper li {
  display: inline-block;
  overflow: hidden;
  max-height: 200px;
}
.wrapper img {
  max-width: 200px;
}
.wrapper .overlay-container {
  display: block;
  position: relative;
}
.wrapper .overlay-container::before {
  content: attr(data-overlay-text);
  font: 1em/1.5em 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: absolute;
  z-index: 1;
  /*On top of parent*/
  top: 40%;
  width: 100%;
  text-align: center;
  color: #fff;
  background: rgba(128, 128, 128, 0.8);
  opacity: 0;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.wrapper .overlay-container:hover::before {
  opacity: 1;
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}
.wrapper .overlay-container .overlay-img {
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.wrapper .overlay-container:hover .overlay-img {
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
/*Original source: http://codepen.io/trungk18/pen/MepYXj*/
<div class="wrapper">
  <ul class="img-grid">
    <li>
      <a href="#" class="overlay-container" data-overlay-text="Beatles">
        <img src="http://trungk18.github.io/img/image-grid/img-beatles.jpg" alt="Image capture goes here 01" class="overlay-img" />
      </a>
    </li>
    <li>
      <a href="#" class="overlay-container" data-overlay-text="Bonsai">
        <img src="http://trungk18.github.io/img/image-grid/img-bonsai.jpg" alt="Image capture goes here 02" class="overlay-img" />
      </a>
    </li>  
  </ul>
</div>

相关问题
最新问题