Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> div { border: 2px solid #CCCCCC; } .original-img { width: 500px; height: 330px; margin-bottom: 20px; background: url("https://images.unsplash.com/photo-1522204538344-922f76ecc041?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60") no-repeat center center; } .square { background: url("https://images.unsplash.com/photo-1522204538344-922f76ecc041?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60") 50% 50% no-repeat; width: 300px; height: 300px; } .square:hover { opacity: 0.5; } </style> </head> <body> <div class="original-img"></div> <div class="square"></div> </body> </html>