如何在两张图片盘旋后居中图像

-2

你好，我需要在css中居中放置图像，但两张图片（原始和居中）都需要可见。这里是我当前的代码：如何在两张图片盘旋后居中图像

HTML

<head> 
<link rel="stylesheet" type="text/css" href="stajl.css"> 
</head> 
<body> 
    <div> 
    <img src="smile.jpeg"> 
    </div> 
</body>

CSS

div:hover { 
    text-align:center 
}

谢谢队友

来源

2016-05-31 Michał Brzoza

请告诉我们你迄今所做的.. – Lal

HTML： \t <链接相对= “样式” 类型= “文/ CSS的” href =” stajl.css“>

CSS：DIV：悬停{ \t的text-align：中心 } –

现在，您需要澄清两张图片的含义，因为页面上只有一张图片，CSS中没有参考。 –

这将需要JS，记住这个JS代码只是一个非常快速的例子，我会稍后对它进行优化，我们可以缓存img源文件并在arg中使用函数不要重复代码等。但它的工作原理和简单的JS和kep尽可能简单的解释目的。

document.getElementById("left").addEventListener('mouseover', function(){ 
var placeholder = document.getElementById("imageHolder"); 

placeholder.style.background = "url(http://lorempixel.com/400/200/nightlife)"; 
placeholder.style.opacity = 1;

}）;

这侦听图像上的鼠标悬停事件并悬停时，它获取占位符div并将占位img的url值作为占位符div的背景。动画通过改变CSS不透明度进行转换。

链接到笔：

http://codepen.io/damianocel/pen/NrPrEL

来源

2016-05-31 20:19:44

是否可以在CSS中完成？这是为了我的学校项目，老师说它必须在CSS中完成。不管怎么说，还是要谢谢你。我也做了一些研究，我需要像lightbox这样的东西，但在CSS中做了悬停效果。 –

到目前为止，我已经完成了这项工作，只需要在盘旋之后进行工作，而不是点击。 –

对于css，你只能被限制在一个图像上，除非采用非常冗长的方法，否则无法想象一种方法可以将这个图像做成多于一张没有css的图像。你可以设置2个背景相同，但不透明度值为0和1，然后悬停，设置隐藏的div的不透明度为1.但JS是这种IMO的最佳方法 –

如何在两张图片盘旋后居中图像

回答

相关问题