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

Customizing the style of react-select is essential for creating a unique and visually appealing user experience

I am looking to maintain the visual style of my input fields to match that of a react-select component. I have been advised to use styled-components, yet I am uncertain about which styles need to be adjusted in order to achieve the desired outcome. Ideally ...

cssreactjsstyled-componentsreact-select

What is the reason for receiving 'undefined' from await page.Evaluate() function call?

My attempt at creating a deploybot using nodejs is encountering an issue when trying to access the environments page, as it's unable to locate the button. The code snippet in question is as follows: //wait until element with unique id contain ...

htmlnode.js

Is it possible to add a bottom border without having slanted corners?

I am looking to design a box with different colors - red on the left, right, and top, and grey at the bottom. However, I want the bottom border of the box to be flat. HTML <div class="ts"></div> CSS .ts { height:100px; width:100 ...

htmlcssborderflat

Creating columns of equal height using Bootstrap 3 and flexbox

Working with Bootstrap 3 (unable to switch to Bootstrap 4) and looking to achieve the same-height columns effect as shown in the image: Managed to get it done using position absolute and @media screen for image size and padding adjustments, but I believe ...

htmlcsstwitter-bootstrap-3flexboxdisplay

Eliminate any unnecessary tags located before the text

I am facing a challenge with the following code snippet. The Variable contains a string that includes HTML tags such as <img>, <a>, or <br>. My goal is to eliminate the <img> tag, <a> tag, or <br> tag if they appear befo ...

javascriptjqueryhtml

Exploring discrepancies between two tables with the power of Javascript

const firstTable = document.getElementById('table_1') const secondTable = document.getElementById('table_2') const rows1 = firstTable.rows const rows2 = secondTable.rows for (let i = 0; i < rows1.length; i++) { for (let x in rows ...

javascripthtmljquerycss

Displaying a video in fullscreen on a webpage

Struggling to achieve the desired result, seeking advice from experts. Looking to create a classic example like this: http://codepen.io/anon/pen/rWwaRE But want it embedded within blocks of text and possibly triggered by scrolling over it similar to this ...

htmlcssvideofullscreen

The Kendo Dropdownlist mysteriously disappears behind the PDFViewer when using Safari

Currently, I am immersed in a project based on the MVC framework and utilizing the Kendo DropDownList. An problem has arisen, which is visualized in the image below. Specifically, the items of the Kendo DropDownList are becoming obscured by the PDFViewer ...

asp.net-mvccsskendo-uikendo-asp.net-mvc

A JavaScript or CSS file within an HTML document

I understand this may seem like a silly question. However, out of curiosity, is there a way to upload an HTML file (with a .html extension) as a JavaScript or CSS file (renamed with a .js or .css extension), specifying the type header as either HTML or js ...

javascripthtmlcss

Is there a way to transfer controller scope to a partial HTML file?

Welcome to my HTML setup <div ng-controller="filterController"> <div class="quick-view" id="quickview" data-toggle="modal" data-target="#modal-bar" ng-click="quickView(quickview)"><i class="fa fa-eye"& ...

htmlangularjsajax

Tips for organizing the data you have collected from the table

After successfully printing all the data from my database, I am facing a challenge in designing my data effectively. The table I am working with is called post_tbl and it has columns named post_id, post_message, and post_date. This is the query I am usin ...

phphtmlcss

What is the regular expression that allows numbers between 1 and 24, including decimals?

Can anyone help me create a regex expression that only allows numbers between 1 and 24, with up to 2 decimal places? The numbers should range from 1 to 24, as well as include decimals like 1.00, 1.01, 1.02, all the way up to 24.99. ...

javascripthtmlregexexpression

Which is better for parsing HTML - CSS or XPath selectors?

For my project, I aim to utilize lxml for parsing HTML content, as it offers support for both XPath and CSS selectors. I am currently deciding whether to bind my model properties to either CSS or XPath. I am contemplating which option would be most benefi ...

htmlcssparsingxpathcss-selectors

Adding HTML attributes to a VueJS table allows for more customization and control

Is it possible to incorporate HTML/Bootstrap elements into a cell in VueJS? <b-table striped show-empty :items="filtered"> <template slot="top-row" slot-scope="{ fields }"> <td v-for="field in fields& ...

htmlvue.jsvuejs2frontendbootstrap-vue

Pros and cons of leveraging a hybrid HTML/Objective-C app for the iPhone platform

When creating an app, what are the key benefits or drawbacks to consider when deciding between utilizing HTML/UIWebView for certain parts (such as styled menus and pages with complex layouts) versus going completely native? I'm eager to learn from ot ...

iphonehtmlobjective-cipaduiwebview

Implementing a feature to add selected checkboxes and remove unselected checkboxes with PHP and MySQL

I am currently working with 3 tables in my database: product, category, and product_category. I am in the process of creating a form that allows users to edit (insert/delete) categories for a specific product. My challenge lies in inserting an array of che ...

phphtml

The grid layout is being disrupted by a concealed input

As I work on styling my admin panels with Twitter Bootstrap, I've encountered a strange issue. Upon testing in Chrome 28 and Firefox, adding a simple hidden input seems to disrupt the grid layout. If the hidden input is moved into div.span6 or remove ...

htmlcsstwitter-bootstrapgrid

Conceal elements when they are too small without the use of JavaScript

I want to be able to hide content when the window size is below a certain point. After finding an example at (http://css-tricks.com/dynamic-page-replacing-content/), I still couldn't figure out why it actually works. <div class="container"> ...

cssdynamicsize

Having trouble extracting text from a webelement using Python's Selenium

I've encountered an obstacle with Python Selenium when trying to extract text from a web element. My system is running Python 3.6.8 and Selenium 3.141.0. Using the xpath method, I locate a web element and store it in a test variable (testvar). This v ...

htmlpython-3.xseleniumtext

Vue's v-model functionality encounters issues when navigating back and forth in the browsing history

Below is a sample of code from the local index.html file: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">< ...

htmlvue.jsinput