Gallerie mit Links versehen

Hallo zusammen,

ich such schon nach Tagen eine Lösung für mein Problem:

Und zwar habe ich auf meiner HP eine Bildergallerie bei der bei Mouseover 2 icons erscheinen. eins zum vergrößern das Bildes in einer Overlay gallery und das andere mit link zum projekt.
Der link zum Projekt funktioniert. aber das bild das eigentlich als overlay geöffnet werden soll, öffnet sich nur groß im Fenster und man muss es über den zurückbutton wieder schließen.

Ich habe diesen effect bei mir verwendet. Schaut auch soweit gut aus. nur geht der "lupen"-link nicht

Mit js kenn ich mich leider nicht so gut aus.

Hoffentlich kann mir jemand helfen

HTML:

<div class="item col-lg-4" data-groups='['ui']'>
<div class="box">
<img src="small-img/project1.jpg">
<figure>
<div class="box-content">
<div class="inner-content">
<ul class="icon">
<li><a href="big-img/project1.jpg" alt=""><i class="fa fa-search"></i></a></li>
<li><a href="#about"><i class="fa fa-link"></i></a></li>
</ul>
</div>
</div>
</figure>
</div>
</div>

Css:

.box{
background: #000;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
text-align: center;
position: relative;
}
.box img{
width: 100%;
height: auto;
transition: all 0.35s ease 0s;
}
.box:hover img{ opacity: 0.5; }
.box .box-content{
padding: 30px 10px 30px 0;
background: rgba(0, 0, 0, 0.65);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: all 0.35s ease 0s;
}
.box:hover .box-content{
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
opacity: 1;
}

.box .icon{
width: 100%;
list-style: none;
padding: 0;
margin: 0;
font-size: 22px;
position: absolute;
top: 50%;
}
.box .icon li{
display: inline-block;
opacity: 0;
transform: translateY(40px);
transition: all 0.35s ease 0s;
}
.box:hover .icon li{
opacity: 1;
transform: translateY(0px);
}
.box:hover .icon li:first-child{ transition-delay: 0.1s; }
.box:hover .icon li:nth-child(2){ transition-delay: 0.2s; }
.box .icon li a{
display: block;
width: 35px;
height: 35px;
border-radius: 50%;
background: #f39c12;
font-size: 20px;
color: #000;
line-height: 35px;
margin-right: 5px;
transition: all 0.35s ease 0s;
}
.box .icon a:hover{ background: #fff; }
@media only screen and (max-width:990px){
.box{ margin-bottom: 20px; }
}

wenn man auf die lupe klickt soll sich das bild als "overlay" öffnen und nicht im ganzen fenster. Der andere link (geht auf die Projektseite) ist eigentlich außen vor, der funktioniert bei mir.

das bild soll sich lightbox-ähnlich öffnen (mit x im eck zum wieder schließen) . Am besten wäre es natürlich noch, wenn man sich dann durch alle bilder die als thumbs da sind durchklicken könnte.

ja genau so ähnlich.

hab versucht die lightbox einzubauen, dann funktioniert aber seltsamer weise der ander link nicht mehr. Frag mich nicht wieso

- - - Aktualisiert - - -

ich mir ein html template runtergeladen, das ich meinen bedürfnissen optimiere. da mir da aber die portfolioübersicht designtechnisch nicht passt hab ich diese angepasst. in dieser version habe ich aber leider die beiden links nicht nebeneinander bekommen. sie waren quasi übereinander und dementsprechend hat dann nur ein link funktioniert. also hab ich mir dann einen anderen effect via css eingebaut. der ja auch wunderbar funktioniert, nur fehlt mir nun der "link" damit sch bei der lupe die lightbox öffnet. bzw ich glaub das ist gar nicht die lightbox, sondern magnific popup. und da fängt mein problem glaub ich auch schon an

Ja, richtig. Deshalb auch das html template zum anpassen.
Hier findest zu meine erste roundabout Lösung.
Wenn du auf das Bild klickst öffnet sich die „Galerie“ ( was mit dem Klick auf die Lupe passieren soll). In der Bildunterschrift befindet sich ein Stern und wenn man auf den klickt ist das der Effekt was das andere Icon machen soll