Display an image with a gray-bordered, rounded shape, hover effect, and adjustable width.

HTML

<br>
<a target="_blank" href="https://placehold.co/800x800/jpg">
<img src="https://placehold.co/800x800/jpg" alt="test"/>
</a>

CSS

body {
       color:#000000;
       background-color:#ffffff;
       background-image:url('newlogo.gif');
       background-repeat:no-repeat;
       font-family: Helvetica, Arial, sans-serif;
     }
     img {
       image-orientation: none;
       border: 1px solid #ddd; /* Gray border */
       border-radius: 4px;  /* Rounded border */
       padding: 5px; /* Some padding */
       width: 150px; /* Set a small width */
     }

     /* Add a hover effect (blue shadow) */
     img:hover {
      box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
     }
     a  { color:#0000FF; }
     a:visited { color:#800080; }
     a:hover { color:#008000; }
     a:active { color:#FF0000; }
     .rotate-image {
       /* Adjust angle as needed (e.g., 90deg, -90deg, 180deg) */
       transform: rotate(90deg);
     }