Explore an illustration of a website with a hover effect

As I delve into the world of web development, I have taken up the challenge of replicating another website's layout to hone my skills. However, there is one aspect of this site that has me stumped =/

<div class="a">
<span>Teste</span>
<i>Teste Two</i>
</div>

html {
color:#fff;
}

.a {
width:200px;
height:200px;
background:#000;
text-align:center;
font-size:36px;
spanopacity:1;
transform:scale(1);
}

i {
top:50%;
left:50%;
position:absolute;
z-index:2;
}

I attempted to recreate it here, but unfortunately, it did not turn out as expected.

On this particular site, there are sections with boxes labeled "Get Involved" and various icons that change when hovered over.

I am puzzled by how they achieved this using pseudo-elements ::after and ::before.

htmlcsshover

Answer №1

I made a few tweaks to the code you provided, check it out below.

html{
  color:#000;
}
.a{
  width:200px;
  height:200px;
  background:#000;
  text-align:center;
  font-size:36px;
  overflow:hidden;
  cursor:pointer;
}
.b{
  width:200px;
  height:200px;  background:url('http://cdn.bigbangfish.com/quotes/nature-quotes-tumblr/nature-quotes-tumblr-8.jpg');
  background-size:cover;
  text-align:center;
  font-size:36px;
  margin:0 auto;
  transform: rotateZ(0) scale(1);
  transition: all 0.3s ease-in-out;
}
.icon{
  background-image:url('http://lifeandscience.org/keepers/files/2011/02/combo_plus_sign2.png');
  background-size:container;
  background-position:center;
  background-repeat:no-repeat;
  background-color: rgba(255, 255, 255, 0.29);
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0; 
  opacity:0;
  transition: all 0.3s ease-in-out;
}
.a:hover .b,
.a:hover .icon{
-webkit-transform: rotateZ(-3deg) scale(1.2);
transform: rotateZ(-3deg) scale(1.2);
   opacity:1;
}
<div class="a">
  <div class="b">
    <span>EIQ</span>
    <i>SEHLOIRO</i>
    <div class="icon">
    </div>
  </div>
</div>

Check out the CodePen link here

Answer №3

Utilizing a transition CSS property, the second link achieves this effect on the text:

-webkit-transition: -webkit-transform 0.5s ease,opacity 0.5s ease; 
-moz-transition: -moz-transform 0.5s ease,opacity 0.5s ease;
-ms-transition: transform 0.5s ease,opacity 0.5s ease;
transition: transform 0.5s ease,opacity 0.5s ease;

The transformation instructs the browser to change the text in half a second and then adjust the opacity after to make it visible:

opacity: 1;

For the first element, a similar approach is taken:

opacity: 0;

This action renders the first element invisible while simultaneously making the second element visible and smaller.

Answer №4

.a:hover
{
background-color:#00f;
transition: background-color 0.25s ease-out 0.1s;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The styling for buttons links is malfunctioning

I am currently developing my own version of Bootstrap and focusing on buttons and links. I have anchor tags within the button element, but the link styling is not displaying correctly. HTML <button class="btn-danger"><a href="#">Danger</a& ...

htmlcss

What is the best way to include a class with Knockout JS?

After going through the basic Knockout tutorial and examining various examples, I decided to try it out myself on jsFiddle. However, I encountered some issues as my attempts did not quite work. The goal is simple - I just want to add the class open to a d ...

javascripthtmlknockout.js

Troubleshooting: Navbar dropdown menu in AngularJS gets hidden within UI layout

After spending some time trying to understand why the NavBar drop-down is getting overlapped inside the ui-layout, I realize that I must be overlooking some basic steps. This issue seems so simple, yet it is eluding me. To see the details of the problem, ...

cssangularjstwitter-bootstrap

When you choose the File->Print option, the PDF contents are seamlessly printed within the document

My web page has an embedded PDF file within the content. <h3>Foo</h3> <object id="foo" data="bigboundingbox.pdf" type="application/pdf" classid="clsid:CA8A9780-280D-11CF-A24D-444553540000"> </object> When viewed in Interne ...

htmlinternet-explorerpdfwebprinting

Utilizing a jQuery plugin for input file validation

This code is functioning properly, however the file field is not being validated. All input fields are successfully validated by this plugin except for the file type field. I believe there may be something missing in my implementation, so please help me de ...

phpjqueryhtml

The onClick event cannot be triggered within a div that is generated dynamically

I am having an issue with a jquery code that dynamically generates a div. The problem I'm facing is that the onclick function for the anchor tag is not calling the required function. Below is the code snippet: $("#new").append(' <ul cla ...

javascriptjqueryhtmlajax

How can we display the Recent Updates from our LinkedIn profile on our website using iframe or javascript?

Currently, I am in the process of developing a .NET web application for our company's website. We already maintain an active LinkedIn profile where we regularly post updates. https://i.stack.imgur.com/T2ziX.png My main query at this point is whether ...

javascripthtmliframelinkedin-api

What steps do I need to take in order to change an HTML div's background to a black

My current project involves dynamically loading HTML content stored on disk into a specific div element. This is achieved by using the following code: $('#FictionContent').load('Content/HuckFinn.html'); Just to provide some background ...

jqueryhtmlcssvisual-studiowebmatrix-3

Necessary workaround needed for HTML time limit

Our HTML page has been designed to automatically timeout after 10 minutes of inactivity. This functionality is achieved through the following code: function CheckExpire() { $.ajax({ type:'GET', url:self.location.pathname+"?ch ...

javascripthtmlajax

When trying to use ngModel with Angular, an error occurs where the property 'selected' cannot be created on a string

I'm currently attempting to utilize [(ngModel)] in the following manner: <div class="items"> <tbody> <tr *ngFor="let info of this.information"> <td> <input type="checkbox" [(ngModel)]="this.info.n ...

htmlangularangular-ngmodel

What is the best way to utilize a mask in an inline SVG that is compatible with Chrome browser?

I am looking to visually crop my element using an SVG shape that is defined within the same HTML file (inline SVG). Using clip-path works perfectly: div { width: 200px; height: 200px; background-color: red; clip-path: url("#c"); } <div> ...

htmlcsssvg

Utilizing $.each to dynamically add data to a jQuery Mobile listview

Trying to implement a data reading mechanism using ajax resulted in unexpected html tag generation for <ul> <li>. The code snippet is as follows: (function( $, undefined ) { $(document).on("pagecreate", ".jqm-demos", function(){ ...

javascriptjqueryhtmljquery-mobile

Tips for creating a star program using Angular 2+

Create an Angular 2+ code snippet that will print asterisks (*) in a list on button click. When the button is clicked, it should add one more asterisk to the list each time. For example: Button Click 1 - Output: * Button Click 2 - Output: ** Button Cl ...

htmlangulartypescriptngfor

Enhancing Widget Titles in Wordpress with a <span>

Looking to customize the color of the first word in a widget title on a WordPress site? I'm running WP v.3.7.1 with a custom child theme based on twentythirteen. All it takes is wrapping the first word in a <span> tag and then styling it as nee ...

wordpresswidgettitlehtml

Problem with CSS transition on horizontal scrolling list items

I am currently working on a horizontal list with list items. When I hover over the list, it is supposed to expand horizontally to display more information, although this feature has not yet been implemented. However, I am having trouble understanding why ...

csscss-transitionscss-animationsmousehover

Adjust the table to line up perfectly, center the content within the table cell (td), and align the

I'm currently working on aligning a table by centering the td elements and left justifying the text inside them. My initial attempt was to use flex for center alignment, which worked to some extent but I couldn't get the left alignment right. I ...

css

Live Server in VS Code not refreshing automatically as expected

My problem is with VS Code and Live Server for HTML CSS. I expected the page to automatically reload after editing my HTML, but that's not happening. Even though I have Auto-Save enabled, Live Server isn't updating or refreshing my page automati ...

htmlcssvscode-extensionsliveserver

Validation of default values in contact forms

Obtained a free contact form online and hoping it works flawlessly, but struggling with validation for fields like "Full Name" in JS and PHP. Here is the HTML code: <input type="text" name="contactname" id="contactname" class="required" role="inpu ...

phpjavascripthtml

Changing the display of elements using Javascript in IE6 by modifying class

Currently, I am facing an issue at work that involves a piece of code. The code functions correctly in Firefox 3.6 where clicking on a row changes its class name and should also change the properties of the child elements. However, in IE6 and possibly othe ...

javascriptcssinternet-explorer-7internet-explorer-6

accordions that are supposed to adapt to different screen sizes are

My custom responsive accordions are not functioning as expected. The requirement is to display headings and content for desktop view, but switch to accordions on smaller devices. I have managed to do this, however, when resizing the window, the functionali ...

javascriptjqueryhtmlcss