Is there a way to rotate an image 180 degrees while keeping the flip side visible? I've attempted different CSS methods, but the image always reverts back to its original side when hovering elsewhere.
Below is an example of the code I tried:
CSS :
.card {
width: 130px;
height: 195px;
background: url("images/card-back.jpg") no-repeat;
margin: 50px;
}
.card:hover {
background: url("images/card-front.jpg") no-repeat;
}
HTML :
<body>
<div class="card"></div>
</body>
Are you looking for this outcome?
$(".card").mouseover(function(){
$(this).css('transform', 'rotate(180deg)');
}).card {
width: 130px;
height: 195px;
background: url("https://sun9-32.userapi.com/impf/c824201/v824201969/173424/ayWCFmi538s.jpg?size=200x0&quality=90&sign=b461a01af900c4374512c2b13455c25d&ava=1") no-repeat;
margin: 50px;
transition: 1s;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="card"></div>
</body>I recently created a side nav with toggle functionality, but I'm encountering an issue where it's not pushing the text that is underneath it. I made some modifications to the code based on a tutorial I found at this link. Unfortunately, due to re ...
<div class="subscribe__form--action--btn"> <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32545b5e5b5746545C5B5356477F54585850"> </a>" meth ...
Recently, I delved into the world of PhantomJS and its ability to extract data from websites through JavaScript. This process is commonly referred to as web scraping. My goal was to retrieve the text content of an element by its ID. However, I encountered ...
Is there a way to achieve functionality similar to draw.io where users can select rows and columns to insert a table? Any ideas on what this feature is called or how to implement it? https://i.sstatic.net/23cNY.png ...
I'm trying to adjust the position of the indicator but I couldn't find any information in the documentation regarding this. Here is a helpful StackBlitz example from Angular Material docs. My goal is to have the indicator displayed on the right s ...
Creating a simple webpage with a form input that triggers a script to request JSON data from the server based on the user's input. The challenge is passing the value from the input field to a function for processing. var search = document.querySele ...
I utilized an array to store the values and then sent the data via an AJAX call to another page for insertion into the database. Here is the code for the sending page with the AJAX call: $(function () { $(".sch_button").click(function () { var ...
I'm facing an issue with Chrome adding a user agent stylesheet to my body, causing it to be larger than I intended in the CSS... Despite reading up on the user agent stylesheet, I haven't found a solution to override it with my own CSS code for ...
Check out this website where the ordered and unordered lists are not aligned correctly. The ideal alignment would have the bullets (or numbers) left aligned. For instance, the number "1." should be aligned to the left on the same line as the heading "Per ...
I have a specific goal in mind: When hovering over the div labeled "hey," I want a background transition to occur. However, once the div reaches the red part of the page, I do not want that hover effect to continue on the div. When you hover over my ".ok" ...
Is there a way to display the personal Telegram account in an iframe tag? I experimented with the code below, but unfortunately it did not produce the desired result: <iframe src="https://telegram.me/joinchat/BfNEij9CbDh03kwXacO5OA"></iframe> ...
Currently, I am facing an issue with displaying notifications where the text exceeds the element width. I am looking for a solution to make the text wrap to the next line if it is too long. https://i.sstatic.net/5NcNs.png To handle notifications, I am ut ...
Encountering errors in the terminal while attempting to deploy a website on Github using npm I am at a loss for what steps to take next PS C:\Users\user\modern_portfolio> npm run deploy > <a href="/cdn-cgi/l/email-protection" cl ...
I am in search of a way to implement a max option on my function. I am contemplating whether using data attributes on the input is the best approach, but I have a feeling there might be a more straightforward solution in jQuery. It's important to note ...
I'm facing a challenge with allowing users to upload their image file through a DOM file uploader (<input type="file"></input>). Once the image is uploaded, I'm unsure of how to transfer it to JavaScript and process it using p5.js. Ho ...
When utilizing Freebase Suggest (), and having a field that chooses between Country or State, how can I make another "City" field filter to only display cities within that selected Country or State? In addition, if a user selects "New York" as their State ...
Currently, I find myself in this situation.. I am currently in the process of installing and setting up Froala, which has a dependency on jquery as documented. Angular 2 and 4 Froala WYSIWYG Editor - Extended Config While my expertise lies more on the ...
I am attempting to add a datepicker to my website, but it is not showing up in the browser. Could there be an issue with some of the other script files I have? Below is where my datepicker div is located: <body> <!-- Preloader --> <div id= ...
Here is the code snippet showcasing CSS styles and HTML elements: CSS: .enableLink{ font-family:Verdana, Geneva, sans-serif; font-size:12px; color:#069; padding-right:20px; text-decoration:underline; cursor:pointer; } .disableLink{ display:none; fon ...
Greetings everyone, I am in search of a jQuery script for loading content, Currently, I am working on a video website project, (For example, if the user clicks on 'most viewed', it should change the videos by fetching their source from a PHP f ...