Assignment 1

by cwhong

HTML

<html>

<body>
	<h1>Liverpool FC under Jurgen Klopp</h1>
	<div class="image-container">
		<div class="image-wrapper">
			<img class="image" src="https://i2-prod.birminghammail.co.uk/incoming/article18571608.ece/ALTERNATES/s1200d/0_kloppo-arrives.jpg" alt="Image 1">
			<div class="image-text">15/16</div>
			<div class="image-details">
				<p>
        <strong>Games Played:</strong> 52* <br>
        <strong>Games Won:</strong> 23 <br>
        <strong>PL:</strong> 8th <br>
        <strong>UEL:</strong> 2nd <br>
        <strong>FA Cup:</strong> 4th Round <br>
        <strong>League Cup:</strong> 2nd <br>
        <strong>Player of the Season:</strong> Coutinho <br>
        <strong>Top Scorer:</strong> Sturridge (13) <br>
        <span>*Klopp took over in October 2015.</span>
        </p>
			</div>
		</div>
		<div class="image-wrapper">
			<img class="image" src="https://premierleague25years.files.wordpress.com/2017/11/arsenalaway1617away1.jpg" alt="Image 2">
			<div class="image-text">16/17</div>
			<div class="image-details">
				<p>
        <strong>Games Played:</strong> 47 <br>
        <strong>Games Won:</strong> 27 <br>
        <strong>PL:</strong> 4th <br>
        <strong>FA Cup:</strong> 4th Round <br>
        <strong>League Cup:</strong> SFs <br>
        <strong>Player of the Season:</strong> Mane <br>
        <strong>Top Scorer:</strong> Coutinho (14) <br>
        </p>
			</div>
		</div>
		<div class="image-wrapper">
			<img class="image" src="https://www.thisisanfield.com/wp-content/uploads/PA-36168278-e1524648176592.jpg" alt="Image 3">
			<div class="image-text">17/18</div>
			<div class="image-details">
				<p>
        <strong>Games Played:</strong> 56 <br>
        <strong>Games Won:</strong> 31 <br>
        <strong>PL:</strong> 4th <br>
        <strong>UCL:</strong> 2nd <br>
        <strong>FA Cup:</strong> 4th Round <br>
        <strong>League Cup:</strong> 3rd Round <br>
        <strong>Player of the Season:</strong> Salah <br>
        <strong>Top...

CSS

body {
  background-color: #C8102E;
  padding: 10px;
}

h1 {
    border: 1px solid black;
    padding: 10px;
    text-align: center;
  }

.image-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 30px;
  padding: 10px;
}

.image-wrapper {
  margin: 10px;
  padding: 10px;
  border: none;
  max-width: 300px;
  text-align: center;
  position: relative;
}

.image {
  max-width: 80%;
  height: auto;
  border-radius: 50%;
  transition: all 0.5s ease;
  margin-right: 10px;
}

.image:hover {
  transform: scale(1.2);
  cursor: pointer;
}

.image-text {
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-top: 10px;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.image-details {
  margin-top: 5px;
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  width: 250px;
}

.image-details span {
  font-size: 12px;
}

.image-wrapper:hover .image-details {
  display: block;
}

JavaScript

$(document).ready(function() {
  $('.image').each(function() {
  console.log('here')
    var alt = $(this).attr('alt');
    var img = new Image();
    img.onload = function() {
      $(img).data('loaded', true);
    };
    img.src = 'images/' + alt + '-large.jpg';
    $(this).data('large-img', img);
  }).hover(
    function() {
      var $this = $(this);
      var origSrc = $this.attr('src');
      var largeImg = $this.data('large-img');
      if (largeImg && $(largeImg).data('loaded')) {
        $this.data('orig-src', origSrc);
        $this.attr('src', largeImg.src);
      }
    },
    function() {
      var $this = $(this);
      var origSrc = $this.data('orig-src');
      if (origSrc) {
        $this.attr('src', origSrc);
      }
    }
  );
});