a：悬停：不以移动为中心

Question

我使用以下代码在此页面上的图片上创建翻转：atheniangrill.com/products /

#hovertext a {
    display: list-item;
    list-style: outside none none;
    position: relative;
}

#hovertext a:hover:before {
animation-name: fadeIn;
animation-duration: 0.8s;
}

#hovertext a:hover:before {
  content: '';
 display:block;
  background: url('/wp-content/uploads/2016/03/roastedredpepper.jpg');
  width: 100%; /* image width */
  height: 100%; /* image height */
  position: absolute;
  top: 0;
  right: 0;
}

在移动设备和iPad上，当您翻转图像时，它们不会居中并浮到一边。我知道我可以制作一个仅限@media的屏幕，但我不确定在编码方面要改变什么。