滑到图像上的图标

Question

我有一个图标的图像，如下图所示。

​

​

图像上的图标是可点击的，每当我单击任何图标时，它都应该移动到中心。我该怎么做？

index.php

<div class="container-fluid">
    <div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 service_img">
        <img src="images/Services.jpg">
        <ul>
        <div class="col-md-12 col-lg-12">   
            <div class="row">
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div> 
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
                <div class="col-md-2 col-lg-2">
                    <li><a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></li>
                </div>
            </div>
        </div>
        </ul>
    </div>
</div><br><br>

text.css

   .bg-img {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
}
.bg-img:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*background-image: linear-gradient(to bottom right, #002f4b, #dc4225);*/
  opacity: .6;
}

我点击的图标应该移到中心。拜托，帮我解决问题。

提前谢谢！

Answer 1

我曾经做过图像传送带，这有助于你实现你的期望。

尝试您的形象为carousel indicator。我已经给出了一个默认的旋转木马。

根据您的需求更改css和div职位。

告诉我这就是你要找的东西。

查看工作编辑的小提琴：http://jsfiddle.net/KishorVelayutham/yhevvxz4/26/

希望这能帮上忙！

Answer 2

猫头鹰旋转木马是解决问题的最佳选择。

<div style="background-image:url('images/Services.jpg');">
        <div class="owl-carousel owl-theme">
            <div class="item">
        <a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></div>
            <div class="item">
        <a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></div>
            <div class="item">
        <a href="#"><img src="images/services_icons/Emerging market penetration.png"></a></div>
    </div>
</div>

您需要包装在背景图像div旋转木马，这个插件提供各种选择，以自定义您的旋转木马，甚至在移动视图。

希望这能帮到你。