HoverEffect in SwiftUI

Photo by Kelly Sikkema on Unsplash

The HoverEffect modifier is probably one of the coolest fun modifiers there is in SwiftUI. I stumbled upon it while going through SwiftUI docs : https://developer.apple.com/documentation/swiftui/hovereffect

As the name suggests, it applies an effect when the pointer hovers over a view. Let’s put an example to see this in action, we will start by putting a view with three circles on screen as shown below:

struct HoverEffectExample: View {
    var body: some View {
        VStack(spacing: 50) {
            Circle()
                .fill(.pink)
                .frame(width: 100, height: 100)
                
            Circle()
                .fill(.orange)
                .frame(width: 100, height: 100)            
            
            Circle()
                .fill(.green)
                .frame(width: 100, height: 100)
        }
    }
}

We will apply hoverEffect modifier to these.

struct HoverEffectExample: View {
    var body: some View {
        VStack(spacing: 50) {
            Circle()
                .fill(.pink)
                .frame(width: 100, height: 100)
                .hoverEffect()
            
            Circle()…