Glowing CSS animation surrounding a PNG image

.zuphologo {
padding-top: 33%;
padding-bottom: 2%;
}

.fx {
    box-shadow: 0px 0px 100px 4px #fff;
  animation: glow 1.5s linear infinite alternate;

}

@keyframes glow{
  to {
    box-shadow: 0px 0px 30px 20px #fff;
  }
}
  <div class="container">
    <div class="row">
      <div class="col text-center zuphologo">
        <a href="google.co.uk">
          <img src="assets/img/logo.png" width="150" class="fx glowing purple">
        </a><br>
        <img src="assets/img/logoMyZupho.png" width="250" class="myzuphologo"><br>
        <p class="mylove">my love / mon amour / il mio amore / mi amore</p>
      </div>
    </div>
  </div>

The logo on this website already has an animated effect:

However, the hover effect appears in a square shape rather than wrapping around the pentagon logo. How can I adjust it to wrap around the logo properly?

htmlcssanimation

Answer №1

My technique involves using an SVG-hexagon for the shadow, applying a blur effect with filter: blur(), and colorizing it using the fill property.

* {
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background-color: black;
}

div {
  position: relative;
}

img,
svg {
  position: absolute;
  transform: translate(-50%, -50%);
}

svg {
  width: 168px;
  height: 196px;
  transform: translate(-50%, -50%) rotate(30deg);
  animation: glow 1.5s linear infinite alternate;
  filter: blur(0px);
  z-index: -10;
  fill: #aaa;
  transition: .2s;
}

@keyframes glow {
  from,
  to {
    filter: blur(0px);
  }
  50% {
    filter: blur(80px);
  }
}

img:hover+svg {
  fill: rgba(244, 66, 232, 1);
}


}
<div>
  <img src="http://zupho.bootstrap.gridhosted.co.uk/assets/img/logo.png">
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M18 2l6 10.5-6 10.5h-12l-6-10.5 6-10.5z"/></svg>
</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

Iterating through textboxes and buttons to trigger actions in JavaScript

Having an issue with JavaScript (or jQuery) where I can successfully input text and click a button on a page using the following script: document.getElementsByName('code')[0].value='ads0mx0'; document.getElementsByName('event&a ...

javascriptjqueryhtml

Store additional data with the visitor ID WEB in Fingerprint JS V3

After browsing through similar questions, I couldn't find a solution that fits my needs. Basically, I have a website where a random emoji is generated and stored in local storage. However, this method is not effective as users can easily delete their ...

javascripthtmlfingerprint

Convert to cshtml and retrieve the logged-in user's identification

I'm completely new to using AngularJS. I recently developed a demo login app, but I'm facing an issue where the page doesn't render even when the login id and password are correct. Code: app.controller('MainCtrl', ['$scope&ap ...

htmlangularjsasp.net-mvc

Utilizing flexbox for dynamic width adjustment with flex-grow functionality

Currently, I am in the process of configuring a menu bar using this particular template I have been attempting to achieve this layout utilizing FlexBox, but it appears that there is an issue. Here is the HTML code: <nav> <ul> < ...

htmlcssflexbox

What is the best method for animating a display table to none or reducing its height to

My goal is to animate a header whenever the class collapseTest is applied. After some trial and error, I have come up with the following solution: http://jsfiddle.net/robertrozas/atuyLtL0/1/. A big shoutout to @Hackerman for helping me get it to work. The ...

javascriptcssanimation

Creating a custom fav icon within a button with CSS styling

https://example.com/code-example Hey there, I'm attempting to replicate the button showcased in the code example above. However, I'm facing a challenge when trying to incorporate the stars without altering the existing script. Another issue is w ...

cssfavicon

After logging in, I am unable to redirect to another PHP page as the login form simply reloads on the same page

Lately, I've encountered an issue that has persisted for a few days. The login validation is functioning flawlessly. However, the problem arises when attempting to redirect to another page, specifically 'index.php', after logging in. Instead ...

javascriptphpjqueryhtmlajax

The process for changing the textContent to X when an image is clicked

How can I create a function that changes the text content to 'X' when an image is clicked? I already have a function that updates the title based on the image dataset, but combining the two functions has been unsuccessful. Can someone help me con ...

javascripthtml

Ensuring consistent placement and scrollability of two divs across all screen sizes

I am in need of a solution to fix the top and bottom divs in the given image. The scroll should only occur when there is overflow. <!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> ...

javascriptjqueryhtmlcss

"Effortlessly move elements with HTML5 drag and drop functionality from either direction

I'm working on an application that requires Html5 Drag and Drop functionality, which is currently functioning well. However, in the app, there may be instances where a dropped item is no longer needed and I want to allow users to re-drag and drop it b ...

javascriptjqueryhtml

JavaScript Audio working on local machine but not on server due to HTML5 compatibility issues

For my project, I am utilizing audio and Javascript in the following way: To start, I populate an array with audio files: var soundArray = new Array(); for (i=0; i<6; i++) { soundArray[i] = new Audio('sounds/sound_' + i + audioExt); ...

javascripthtmlaudio

Retrieve the width of an element once the browser has finalized its dimensions

I am facing an issue with centering a pop-up box perfectly within the window using CSS properties. The code for the pop-up box styling is as follows: #pop_up { position: fixed; display: inline-block; border: 2px solid green; box-shadow: 0p ...

javascriptjquerycss

Creating content on HTML AzureWebApp for transfer to CDS

Currently, my web app is running on azurewebsites.net. I am looking to extract data from a text field or captured photos and save it in the CDS / Dynamics 365 CE database. The website design is complete; I just need to focus on storing the data efficient ...

htmldynamics-crmazure-web-app-servicemicrosoft-dynamicscommon-data-service

The range filter is exclusive to the initial controller

My range filter (see code below) is only working on my first controller. I have added the same filter to other controllers in the app.js and HTML, but it's not functioning for some reason. I checked the console for errors, but there are none. Here i ...

javascripthtmlangularjs

What is the method for toggling background URLs?

Currently, I am utilizing flaunt.js by Todd Moto for my navigation system. My goal is to seamlessly switch the hamburger image with another image when the mobile-menu is shown and hidden. Check out the demo here. For a detailed tutorial, visit this link. ...

javascriptjquerycsstoggleclass

Trouble with saving the positioning after drag and drop

I am currently facing an issue with my drag-and-drop script where the coordinates of positioned relative divs are not being saved in the same position when I reload. These divs are contained within a container with specific height and width, restricting t ...

phpjavascriptjqueryhtmlcss

picking out a particular set of data from a JSON document

I have a map of Europe along with a JSON file that displays the unemployment rate for each country in the year 2011. The JSON file also includes x and y elements, allowing me to place a blue circle on top of each country on the map. My goal is to be able ...

javascriptjqueryhtmlcssjson

Rearrange the order of items in the fancybox gallery

Typically, fancybox displays items in the gallery based on the order they are added in the HTML code. Is there a way to customize the order of items when they are opened in the popup, while keeping the original order when displayed on the page? The solut ...

javascriptjqueryhtmlcssfancybox-2

Leveraging jQuery to extract the value from a concealed form field

Seeking assistance with a jQuery issue... I am attempting to use jQuery to retrieve the values of hidden fields in a form. The problem I am facing is that there are multiple forms displayed on the same page (result set items for updating), and the jQuery ...

javascriptjqueryhtml

Tap and conceal feature on a mobile website

I seem to be facing a JavaScript challenge. On the desktop version of my website, I've managed to create a functionality where hovering over a button reveals some text, and clicking anywhere else on the site hides the text. However, I'm now stru ...

javascriptjquerycss