How can I create a hover sheen effect on a specific part of a background URL
Question
So I have a background image URL set on my homepage.
I would like to know how I might go about creating a hover sheen effect on a specific part of the background url.
Im curious to know if this is achievable given that I am not styling any anchor elements.
home.html.erb
<%= content_for :head do %>
<%= stylesheet_link_tag "home" %>
<% end %>
<div class="jumbotron center">
<h1>Japanese and South Korean luxury Skincare!</h1>
<p>
<%= link_to "MOISTURISERS", pins_path, class: "btn btn-pink btn-lg" %>
<%= link_to "CLEANSERS", "#", class: "btn btn-info btn-lg" %>
<%= link_to "TREATMENTS", "#", class: "btn btn-info btn-lg" %>
</p>
</div>
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>SampleApp</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => false %>
<%= csrf_meta_tags %>
<%= yield :head %>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,700|Lobster' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<%= render 'layouts/header' %>
<div class="container">
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert alert-#{name}") %>
<% end %>
<%= yield %>
</div>
</body>
</html>
1 answers
solution1
3 2016-04-18 11:02:18
You could use some sort of keyframe animation with a gradient to achieve some sort of shine effect. Altering the animation timing will allow a faster/slower animation duration, and the keyframes can also be altered themselves to give a more appropriate effect.
.background-image { height: 300px; width: 100%; background: url('https://photos-1.dropbox.com/t/2/AABgjS7Qy1ic5R5qfrZQcPI9l9zi6Xg37V-MANnf8Hs8VQ/12/80984193/png/32x32/3/1460995200/0/2/japan%20copy.png/EKmAgD8YmrAEIAIoAg/ykSKOOMwapsQ0k9ROiKzlp3-lDFikK1tmVaOI_cdDs0?size_mode=3&size=1600x1200'); background-size:100% 100%; position: relative; overflow:hidden; } .shine { position: absolute; top: 50%; left: 50%; height: 300px; border-radius:50%; width: 300px; background: linear-gradient(-45deg, transparent 0%, rgba(255,255,255,0.6) 50%, transparent 100%); opacity:0; } .background-image:hover .shine{ animation: shine 1s linear forwards 1; } @keyframes shine { 0% { opacity: 0; display: inline-block; top: 50%; left: 50%; } 80% { opacity: 1; top: 25%; left: 25%; } 100% { opacity: 0; display: inline-block; top: 0%; left: 0%; } }
<div class="background-image"> <span class="shine"></span> </div>
Vendor Prefixes removed for clarity.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.