Ways to rotate just the border without rotating the icon through CSS

I need help with rotating only the border 135 deg on hover, without affecting the icon. Below is the code I am using. Any assistance would be greatly appreciated. Thank you!

 My html: `
    <div class="container-fluid details-section">
      <div class="row justify-content-center h-100">
       <div class="col-xl-2 my-auto box text-center">
          <i class="fa fa-guitar"></i>
      </div>
       <div class="col-xl-2 my-auto box text-center">
          <i class="fa fa-guitar"></i>
       </div>
       <div class="col-xl-2 my-auto box text-center">
          <i class="fa fa-guitar"></i>
       </div>
      </div>
    </div>`

    And CSS: 
    
        `.details-section{
          background-color: rgb(83, 83, 83);
          height: 200px;
        }
        
        
        .box i{
          font-size: 70px;
          border: 2px solid #c49b63;
          color: black;
        }
    .box:hover i{
      transform: rotate(135deg);
    }
    `
javascripthtmlcssbootstrap-4

Answer №1

Let's explore a unique approach using the reverse transform option. I've made some adjustments to the HTML structure to rotate an inner element instead of the .box itself, providing a clear separation between the bootstrap elements and the rotating elements.

.details-section {
  background-color: rgb(83, 83, 83);
  height: 200px;
}

.icon-container {
  border: 2px solid #c49b63;
  transition: 0.5s linear;
}

.box i {
  font-size: 70px;
  color: black;
  transition: 0.5s linear;
}

.icon-container:hover {
  transform: rotate(135deg);
}

.icon-container:hover i {
  transform: rotate(-135deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<div class="container-fluid details-section">
  <div class="row justify-content-center h-100">
    <div class="col-sm-2 my-auto box text-center">
      <div class="icon-container">
        <i class="fa fa-guitar"></i>
      </div>
    </div>
    <div class="col-sm-2 my-auto box text-center">
      <div class="icon-container">
        <i class="fa fa-guitar"></i>
      </div>
    </div>
    <div class="col-sm-2 my-auto box text-center">
      <div class="icon-container">
        <i class="fa fa-guitar"></i>
      </div>
    </div>
  </div>
</div>

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

Learn how to showcase real-time stock information from Yahoo Finance on an Android device. See the JSON format provided below for guidance

finance_charts_json_callback( { "meta" : { "uri" :"/instrument/1.0/PTC/chartdata;type=quote;range=1d/json/", "ticker" : "ptc", "Company-Name" : "PTC Inc.", "Exchange-Name" : "NMS", "unit" : "MIN", "timezone" : "EDT", "curr ...

javascriptandroidjqueryhtmlajax

Steps for adding a background image to a div element

I am struggling to place my background behind the jumbotron div, but no matter what I do, it always ends up appearing below the image instead of on top of it. Can someone please guide me on how to resolve this issue? Note: I have a specific requirement wh ...

htmlcssbootstrap-4

Error: The function sort cannot be applied to the result of calling the calendar method on the moment object

I retrieve the data from this URL. I am looking to display the data sorted by a recent date. I attempted to use the map method to render the data and then proceeded to sort it based on the date, but encountered an error. To organize the dates, I made use ...

javascriptreactjssortingmapping

What is the best way to set up a condition that only runs if an element does not contain a certain class, such as "active"?

Click here for the picture I have a list of items: a, b, c, d, e, f. Whenever I click on item b, it becomes active and the other elements lose the "active" class. When an element has the "active" class, I want the background to change accordingly. If it ...

jqueryhtmlcssonclick

Modify the height of React Cards without implementing collapse functionality

Currently, I am in the process of developing a web interface that displays various processes and services. The information is presented in React cards that support expand/collapse functionality. However, I am facing an issue where expanding one card affect ...

javascripthtmlcssreactjstypescript

Ways to dynamically update the content of a variable when the input value is modified

Essentially, I have a straightforward code snippet provided below. It is necessary to update the amount and email whenever those are modified by someone. UPDATE: Credit goes to @ellipsis. Your version is close to perfect, except for the data transmission ...

jqueryhtml

Style the CSS exclusively to the expanded menu section

I need help with applying CSS rules to my navbar menu without affecting the collapsed menu. I came across a solution here and tried using this code: @media (min-width: 980px) { /* your conditional CSS*/ } However, the issue arises when my browser win ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

Retrieve the chosen item from the autocomplete feature

Unfortunately, I have encountered an issue with this solution as I was unable to get it to work correctly in my code. The objective is to retrieve the selected item and then call another function to utilize it. The script is as follows: <script type=" ...

javascriptjqueryhtmljson

Troubleshooting problems with dropdown binding in Knockout ObservableArray

I am encountering an issue with fetching data from a restful wcf service during page load and binding it to a dropdown, which is not functioning as expected. function CreateItem(name, value) { var self = this; self.itemNam ...

javascriptdata-bindingknockout.js

Is there a way to retrieve the HTML raw code using backticks for string interpolation in JavaScript?

I am working on a resume builder project where the HTML template file is stored in Firebase storage and retrieved using a URL. The template has been modified to include string interpolation, such as <h1>${name}</h1>. However, when I fetch the d ...

javascriptreactjs

What steps do I need to take in Bootstrap 5 to add a search icon to the navbar that reveals a search box beneath it when clicked?

I've made progress on the navbar design Now, I'm looking to add a search icon next to the login button. Clicking on the search icon should reveal a search box below the navbar, similar to the image shown below. My transparent navbar has a relati ...

javascripthtmlcssbootstrap-5

Leveraging backstretch.js in combination with blur.js (or equivalent)

Query Update I provided a response to the query below, however, I am experiencing some lag and a noticeable stepped transition between images. Can anyone offer advice on how to optimize this issue? Perhaps it would be better to go back to using a static ...

javascriptjquerycssbackground-image

show a different text when hovering over a table cell

I am working with a table where one column displays the employee ID, and I would like to show their names when hovering over it. Can someone assist me with this task? ...

html

Oops, it seems like there is a TypeError with the function window.initMap in Google Maps

For the past week, I have been struggling to update my marks on Google Maps while using AJAX in an HTML page. My controller fetches data from the database and sends it back, but now I am encountering the following error: TypeError: window.initMap is not a ...

javascriptphpajaxgoogle-maps

Why do style assignments lose their motion when executed right after being made?

If you take a look at this specific fiddle in Webkit, you will see exactly what I am referring to. Is there a way to define the style of an element when it is first specified, and then its final state? I would like to be able to fully define a single-ste ...

javascripthtmlanimationcss

Easiest method to change cursor to 'wait' and then return all elements to their original state

On my website, there are certain CSS classes that define a specific cursor style when hovered over. I am trying to implement a feature where the cursor changes to a "wait" image whenever an AJAX call is initiated on any part of the page, and then reverts b ...

javascriptjquerycss

Locate the final flexbox in the initial row and the initial flexbox in the concluding row

How can I identify the last element of the first row and the first element of the last row in the given code to make it round from all corners? It should be noted that the column number will vary as well as the last element of the first row and first eleme ...

jqueryhtmlcssflexbox

Implement a feature in Vuejs where the user can easily move to the next field by simply

I need help implementing a feature that moves the focus to the next field when the enter key is pressed. I've tried the following code, but it's not working as expected. When I added a debugger in the focusNext method inputs[index + 1].focus();, ...

javascriptvue.jsvuetify.js

Implementing JavaScript logic to proceed to the following array within a 3D array once a specific condition is met

I'm currently tackling a challenge that requires me to obtain a specific number using a given 3D array. This array consists of 2D arrays, each containing the same number repeated x times. The parent array is sorted from largest to smallest. Here&apos ...

javascriptarrays

Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning

I have been trying to troubleshoot this issue, but I am having trouble understanding how to resolve it. Currently, I am using lottie-web in a project and need to set the animation parameters on an object in order to pass them as a parameter later. This i ...

javascriptjsonparsingvue.jslottie