In the index page of current blog, we have a picture shown as below - if we hover the mouse over the image, it will change to another picture and also as we move our mouse, the image will tilt along with the mouse moving.
Spallation Neutron Source
Oak Ridge National Laboratory
The codes for displaying the effect above is presented below,
<div align='center' class='card' data-tilt data-tilt-scale="0.9"> <img src="/assets/img/ORNL.png" alt="SNS" title="SNS" /> <img src="/assets/img/SNS.jpg" class="img-top" alt="ORNL"> <div class="centered-text"><h1>Spallation Neutron Source</h1></div> <div class="centered-text-1"><h1>Oak Ridge National Laboratory</h1></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js"></script>
Here is its implementation in the
index.md file for current blog, Click Me!
Accordingly, the CSS configuration relevant to such an image effect is shown below,
Here, to realize the tilting effect, we rely on the
data-tilt in the HTML
<div> section that contains the image we want to tilt (see the first line in the HTML code snippet above). We can realize that the text and the image is tilted differently so that it seems they are not on the same layer. That effect is realized by referring to the
Creating a parallax effect section of this website. From the website instruction, we will see that this requires some special CSS configuration, which, in our case of current blog implementation, can be found here and here. To realize the showing and hiding effect for both the image and text on mouse hovering, we will rely on the definition of a parent CSS class
card and its children class
img-top, as presented in the CSS snippet above. Then another definition to account for the mouse hovering effect should be defined - see the
.card:hover img-top presented above. Then we know that when mouse is not hovering, the image associated with the
img-top class will not be shown (
display: none). When mouse hovers on the default image,
display: inline will then bring up the image associated with the
img-top class on top of the default image.
N. B. The
@media screen and (min-width: 500px) section in the CSS snippet above is enabled for browser with the width of at least 500px and
@media screen and (max-width: 500px) is for browser with the width of at most 500px. This is the so-called media query to display in different manner for different browsers to realize the optimal display effect on various platforms (computer, ipad, or phone).