css 向360度虚拟游览添加可点击的叠加图像

iih3973s  于 2023-01-06  发布在  其他
关注(0)|答案(1)|浏览(106)

我想添加一个覆盖图像到360虚拟之旅,所以当用户点击图像,它淡出,你可以玩360。
提前感谢!José
enter image description here
我尝试使用视频代码,但它不工作。

ddrv8njm

ddrv8njm1#

下面是我使用的代码:
超文本:

<div id="vidFrame" class="play">
<iframe id="vimeo-video" src="https://downloads.robertgranoff.com/Tishman_Realty/110_East_16th_St_360_Tour.html" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
<img id="vimeo-id" width="100%" height="400" src="https://i.ibb.co/XbLH2G7/overlay-rg.png" />
</div>

CSS:

#vimeo-id,iframe{
position:absolute;
}
#vimeo-id{
cursor:pointer; 
}

.overlay {
position: absolute;
width: 40%;
left: 30%;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}

相关问题